Пользовательская функция jQuery не выполняется в операторе if - PullRequest
Новая
       6

Пользовательская функция jQuery не выполняется в операторе if

0 голосов
/ 30 июня 2018

Я новичок в изучении jQuery, поэтому какое-то время я был озадачен этим (и извините, если мой вопрос очень очевиден). Когда пользователь загружает сайт, я хочу, чтобы экран непрерывно добавлял квадратные изображения каждые 5 секунд, пока они не нажмут кнопку «Нажми меня!». который останавливает это. Функция runForever, которая добавляет изображения, работает сама по себе, если я добавлю '$' перед '(function)', но внутри моей функции нажатия кнопки, runForever вообще не запускается. Я знаю, что он не запускается, потому что я добавил предупреждение, когда пользователь загружает страницу, но страница никогда не дает мне это утверждение. Это, однако, дает мне предупреждение, когда я нажимаю «Click Me!». 

   
    $(document).ready(function() { 
        (function runForever() {
            (".img-box").append("<div class='img-from-other-class'</div>");
            setTimeout(runForever, 5000);
        });
        var clicked = false;
        $("button").click(function() {
            if (clicked == false) {
                alert ("beginning repetition");
                runForever();
            }
            else {
                alert ("button clicked");
                clicked = true; 
                return;
            }
        });
    }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    	<div class="container">
    		<div class="row">
    			<div class="col-6">
    				<h3>jQuery Practice</h3>
    			</div>
    			<div class="col-6">
    				<button class="float-right">
    					Click Me
    				</button>
    			</div>
    		</div>
    
    		<div class="row">
    			<div class="col-12">
    				<div class="img-box">
              <div class="img-from-other-class"></div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>

1 Ответ

0 голосов
/ 30 июня 2018

стиль CSS в следующем 

    .img-from-other-class{
       width:50px;
       height:50px;
       background:red;
       border-radius:50%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
    <button class="stop-btn">STOP</button>
    <div class="image-box"></div>
        <script>
       $(function(){
           function run(){
               interval = setInterval(function(){
               $('.image-box').append('<div class="img-from-other-class"></div>');
               }, 5000);
           }
    
    run();

// click for stop append

      $('.stop-btn').click(function(){
         clearInterval(interval);
      });
    });
    </script>
</body>
<html>
...