Question

我有一些javascript函数-向我显示了一些文本的弹出窗口。我尝试旋转两个“ section”元素，但是如果我使用类custom将HTML的另一个section添加到HTML，则页面仅显示第一个元素。请帮我增加1-2个元素并旋转它。这个想法是让2个或更多具有class custom的元素并以随机顺序显示，直到最后停止。谢谢。

    setInterval(function () {
    	$(".custom").stop().slideToggle('slow');
    }, 2000);
    $(".custom-close").click(function () {
    	$(".custom-social-proof").stop().slideToggle('slow');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
    	<div class="custom-notification">
    		<div class="custom-notification-container">
    			<div class="custom-notification-image-wrapper">
    				<img src="checkbox.png">
    			</div>
    			<div class="custom-notification-content-wrapper">
    				<p class="custom-notification-content">
    					Some Text
    				</p>
    			</div>
    
    		</div>
    		<div class="custom-close"></div>
    	</div>
    </section>

Answer 1

设置部分显示而不是页面加载，而不显示第一部分。检查下面的第二节代码：

<section class="custom" style=" display:none">
    <div class="custom-notification">
      <div class="custom-notification-container">
        <div class="custom-notification-image-wrapper">
          <img src="checkbox.png">
        </div>

        <div class="custom-notification-content-wrapper">
          <p class="custom-notification-content">
            Mario<br>si kupi <b>2</b> matraka  
            <small>predi 1 chas</small>
          </p>
        </div>

      </div>
      <div class="custom-close"></div>
    </div>
</section>

您需要在jQuery代码中进行如下修改：

    setInterval(function () {
        var sectionShown = 0;
        var sectionNotShown = 0;
        $(".custom").each(function(i){
            if ($(this).css("display") == "block") {
                sectionShown = 1;
                $(this).slideToggle('slow');
            } else {
                if (sectionShown == 1) {
                    $(this).slideToggle('slow');
                    sectionShown = 0;
                    sectionNotShown = 1;
                }
            }
        });                
        if (sectionNotShown == 0) {
            $(".custom:first").slideToggle('slow');
        }
    }, 2000);

希望它对您有帮助。

Javascript函数可旋转页面上的某些div元素

1 个答案: