如何更改动态创建的元素的 css？

Question

我有一个在滚动条上动态生成项目的 jquery 脚本。默认情况下，这些项目的覆盖样式设置为visibility: hidden 我决定动态更改覆盖样式一个复选框，并使它们可见：

 $(' #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>