javascript - 如何更改动态创建的元素的 CSS？

Question

我有一个 jquery 脚本，可以在滚动条上动态生成元素。默认情况下，这些元素的叠加样式设置为 visibility: hide我决定动态更改复选框的叠加样式，并使它们可见:

 $(' #switch').click(function() {
        if ($(this).prop("checked") == true) {          


            $('.footer-inner').css({ visibility: 'visible' });

        } else if ($(this).prop("checked") == false) {

            $('.footer-inner').css('visibility', 'hidden');

        }
    });

代码可以很好地触发页面上已创建的所有元素。但如果我向下滚动，新闻元素没有叠加层，则不可见。

Answer 1

我只需在父级上切换 CSS 类，并使用样式来显示和隐藏该元素。无需担心页面更新时调用该函数。它只是被应用。

$('#switch').on('change', function() {
  $(".wrapper").toggleClass("show-footer", this.checked)
}).change();

var i = 4;
window.setInterval(function() {
  i++
  $(".wrapper").append(`<div>${i}</div><div class="footer-inner">${i}X</div>`)
}, 2000)

.wrapper .footer-inner {
  display: none;
}

.wrapper.show-footer .footer-inner {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="switch"><label>Toggle</label>

<div class="wrapper">
  <div>1</div>
  <div class="footer-inner">1X</div>
  <div>2</div>
  <div class="footer-inner">2X</div>
  <div>3</div>
  <div class="footer-inner">3X</div>
  <div>4</div>
  <div class="footer-inner">4X</div>

按照切换可见性的方式，您需要在页面更新后触发该功能。因此，您在进行更新时需要调用 $('#switch').click() 。

根据布局，可以使用复选框状态在纯 CSS 中完成此操作。

var i = 4;
window.setInterval(function() {
  i++
  $(".wrapper").append(`<div>${i}</div><div class="footer-inner">${i}X</div>`)
}, 2000)

.wrapper .footer-inner {
  display: none;
}

#switch:checked + label + .wrapper .footer-inner {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="switch"><label>Toggle</label>
<div class="wrapper">
  <div>1</div>
  <div class="footer-inner">1X</div>
  <div>2</div>
  <div class="footer-inner">2X</div>
  <div>3</div>
  <div class="footer-inner">3X</div>
  <div>4</div>
  <div class="footer-inner">4X</div>