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

【问题标题】：How to append, and change properties of appended number (in css)如何附加和更改附加数字的属性（在 css 中）
【发布时间】：2020-01-31 19:43:55
【问题描述】：

我有两个问题。

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

【问题讨论】：

不回答问题，但是：你的css样式无效，去掉类选择器和{之间的=
另外，CSS 类 obojeno 没有附加到任何东西，所以如果这是随机数的类，你需要修复它。然而，这里最大的问题是你的 replaceWith。它正在做这项工作，但没有做的工作是用新内容替换#slu 元素，所以当它归结为你要附加到#slu 元素的那一行时，它不起作用，因为你已经替换了那个元素，所以它不再存在了，所以代码什么都不做。您需要重做您在 $('#slu').each 函数中尝试执行的操作。

标签： javascript jquery css append

【解决方案1】：

首先，

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

它将您的 替换为 ...。那么下次当你尝试替换内容时，选择器$('#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>

【讨论】：

谢谢。当您在第一个输入字段中按“空格”时，对于每个空格，都会形成一个标签。将鼠标悬停在单个标签上应该会使该标签改变它的颜色。
啊好吧..然后.prikazati:hover { background: yellow; }
尝试使用 html，但没有成功。我得到了“Slucajan broj”作为替代品。没有其他号码。
关于标签..您可以将span 附加到您的kopirati.clone，如下所示：kopirati.clone().insertAfter('#ponisti').append('Tag' + brojac +'')... And then the style would be like: .prikazati span:hover { background: yellow; }` .. 如果你觉得这个答案有帮助，别忘了接受它是正确的；）祝你好运
您是否将其加载到html head 中？您可能必须在结束正文标记之前加载它。否则html 在脚本执行时还没有准备好..

【解决方案2】：

问题是您尝试选择刚刚替换的元素，在您调用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);

【讨论】：