如何附加和更改附加数字的属性（在CSS中）

问题描述 投票：2回答：2

我有两个问题。

  1. 每个标签上的鼠标悬停应将该标签的颜色更改为黄色

  2. 我应该在-Slucajan broj-后面加上随机数（随机数为“ broj”）。问题是：随机数应大于其余的数，并且颜色为红色。

[我所做的所有事情，在我看来[JS]在replaceWith行之后都不接受任何内容。没有错误，但我不知道我的错误在哪里。

这是代码：

<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title> Jquery</title>
</head>

<body>

  <style>
    .obojeno= {
      color: red;
      size: 1.55em
    }
  </style>

  <input type="text" name="prvi" id="prvi" value="Tag"></input>

  <button type="button" id="ponisti" name="ponistavanje">Poništi</button>
  <div class="prikazati"><br></div>
  <hr>
  <form id="unesi" action="#">

    <input type="number" id="min" placeholder="min"></input>
    <input type="number" id="max" placeholder="max"></input>
    <button type="button" id="generisanje" name="generisi">Generiši</button>


    <p id="slu"><b>Slucajan broj </b></p>
  </form>
  <script>
    $('#slu').append('<b>[0-10]:</b>');

    var brojac = 1;
    var kopirati = $(`<div class="prikazati"></div>`);
    $('#prvi').on('input', function(e) {
      if (e.target.value === ' ') {
        kopirati.clone().insertAfter('#ponisti').append('Tag' + brojac);
        $('#prvi').val('');
        brojac += 1;
      }
    });
    $(document).on('click', '.prikazati', function() {
      $(this).remove();
    });

    $('#ponisti').click(function() {
      $('.prikazati').html('<br>');
      brojac = 1;
    });

    $('#generisanje').click(function() {
      var don = Number(document.getElementById('min').value);
      var gor = Number(document.getElementById('max').value);
      var broj;
      broj = (Math.round(Math.random() * (gor - don + 1)) + don);
      //   $('#slu').replaceWith('<br> <br> Slucajan broj','['+ don + ' - ' + gor + ']: ');
      $('#slu').each(function() {
        var elemSlu = $(this);
        elemSlu.replaceWith('<br> <br> Slucajan broj', '[' + don + ' - ' + gor + ']: ');
        $('#slu').append(broj);
      });
    });
  </script>

</body>

</html>
javascript jquery css append
2个回答
1
投票

首先，

elemSlu.replaceWith('<br> <br> Slucajan broj', '[' + don + ' - ' + gor + ']: ');

将<p id="slu">替换为<br><br>...。因此，下一次当您尝试替换内容时，选择器$('#slu')将找不到任何内容，将被忽略。

我认为您应该改用elemSlu.html()：

elemSlu.html('<br> <br> Slucajan broj [' + don + ' - ' + gor + ']: ');

还必须将样式.obojeno应用于附加的broj。这样的事情会起作用：

$('#slu').append(`<span class="obojeno">${broj}</span>`);

并且样式.obojeno应该看起来像这样：

.obojeno {
  color: red;
  font-size: 1.55em;
}

和也涉及“标签”。我不确定您指的是什么标签？。尽管无论如何，您都可以使用css选择器hover设置它们的样式。.如果“标签”是您的文本输入（值“标签”），则css可以看起来像这样：

input[type='text']:hover {
  background-color: yellow
}

edit由于您的评论，标签的样式应如下所示：

.prikazati:hover { 
   background: yellow; 
}


<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title> Jquery</title>
</head>

<body>
  <style>
    .obojeno {
      color: red;
      font-size: 1.55em;
    }
    input[type='text']:hover {
      background-color: yellow
    }
   .prikazati:hover { 
      background: yellow; 
    }
  </style>
  <input type="text" name="prvi" id="prvi" value="Tag">

  <button type="button" id="ponisti" name="ponistavanje">Poništi</button>
  <div class="prikazati"><br></div>
  <hr>
  <form id="unesi" action="#">

    <input type="number" id="min" placeholder="min">
    <input type="number" id="max" placeholder="max">
    <button type="button" id="generisanje" name="generisi">Generiši</button>


    <p id="slu"><b>Slucajan broj </b></p>
  </form>
  <script>
    $('#slu').append('<b>[0-10]:</b>');

    var brojac = 1;
    var kopirati = $(`<div class="prikazati"></div>`);
    $('#prvi').on('input', function(e) {
      if (e.target.value === ' ') {
        kopirati.clone().insertAfter('#ponisti').append('Tag' + brojac);
        $('#prvi').val('');
        brojac += 1;
      }
    });
    $(document).on('click', '.prikazati', function() {
      $(this).remove();
    });

    $('#ponisti').click(function() {
      $('.prikazati').html('<br>');
      brojac = 1;
    });

    $('#generisanje').click(function() {
      var don = Number(document.getElementById('min').value);
      var gor = Number(document.getElementById('max').value);
      var broj;
      broj = (Math.round(Math.random() * (gor - don + 1)) + don);
      //   $('#slu').replaceWith('<br> <br> Slucajan broj','['+ don + ' - ' + gor + ']: ');
      $('#slu').each(function() {
        var elemSlu = $(this);
        elemSlu.html('<br> <br> Slucajan broj [' + don + ' - ' + gor + ']: ');
        $('#slu').append(`<span class="obojeno">${broj}</span>`);
      });
    });
  </script>

</body>

</html>
0
投票

问题是您尝试选择刚替换的元素，在调用replaceWith后，元素#slu在您的页面中不再存在。您可以代替整个元素，而只需将其内部html替换为

 elemSlu.html('<br> <br> Slucajan broj', '[' + don + ' - ' + gor + ']: ');

然后将您的号码附加到该号码（在jquery中，您可以链接这些操作）

elemSlu.html('Slucajan broj [' + don + ' - ' + gor + ']:').append(broj);

旁注：

ID是不合法的。您的页面上始终只能有1个ID为“ slu”的元素，因此应如下所示：

    $('#slu').each(function() {
      var elemSlu = $(this);
      elemSlu.replaceWith('<br> <br> Slucajan broj', '[' + don + ' - ' + gor + ']: ');
      $('#slu').append(broj);
    });

没有意义，变得简单到：

$('#slu').html('Slucajan broj [' + don + ' - ' + gor + ']:').append(broj);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.