javascript - 如何 append 和更改 append 数字的属性(在CSS中)

我有两个问题。

将鼠标悬停在每个标签上应将其颜色更改为黄色
我应该将随机数附加到-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>

最佳答案

第一，

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
}

根据您的评论进行编辑，标签的样式应如下所示：

.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>