如何更改動態創建的元素的 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>