Функция Javascript для поворота некоторых элементов div на странице - PullRequest
Новая
       11

Функция Javascript для поворота некоторых элементов div на странице

0 голосов
/ 14 февраля 2019

У меня есть некоторые функции JavaScript - показывает мне всплывающее окно с некоторыми текстами.Я пытаюсь повернуть два элемента «section», но если я добавлю в HTML еще один раздел с классом custom, на странице отобразится только первый элемент.Пожалуйста, помогите мне добавить еще 1-2 элемента и повернуть его.Идея состоит в том, чтобы иметь 2 или более элементов с классом 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>

1 Ответ

0 голосов
/ 15 февраля 2019

Установить отображение раздела без загрузки страницы вместо первого раздела.Проверьте ниже код второго раздела: 

<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);

Надеюсь, это поможет вам.

...