jquery의 부울 비교가 작동하지 않습니까?

Question

재생/일시 정지 버튼이있는 이미지 슬라이더를 코딩하고 있습니다. 재생 버튼을 클릭하지 않으면 슬라이더가 작동하지 않습니다. 정지를 호출하는 부울 변수를 사용하고 있습니다. 중지는 기본적으로 false입니다.

어떤 이유로 재생 버튼을 클릭하면 부울이 참 (경고와 함께 표시됨)으로 변경되지만 슬라이더는 재생되지 않습니다.

나는 stop이 false인지 확인하는 간단한 if를 사용하고 있습니다. 그것은 당신의 부울

<script> 
 

 
var stop = true; 
 

 
$('.play').click(function(){ 
 
    stop = "false"; 
 
    alert(stop); 
 

 
}); 
 

 

 
$(function(){ 
 
    alert(stop); 
 
    if(stop == "false"){ 
 

 
    setInterval(swapSlides,3000); 
 

 
    function swapSlides(){ 
 
\t var cs = $('div.currentslide:first'); 
 
\t var ns = cs.next(); 
 
\t if(ns.hasClass('mySlides1')){ 
 
\t cs.removeClass('currentslide'); 
 
\t ns.addClass('currentslide'); 
 
    } 
 
\t else{ 
 
\t ns = $('#polaroid1').children('div.mySlides1:first'); 
 
\t cs.removeClass('currentslide'); 
 
\t ns.addClass('currentslide'); 
 
\t } 
 
\t } 
 
\t } 
 
}); 
 
</script>

.play{ 
 
\t position:absolute; 
 
\t left:5px; 
 
\t bottom:5px; 
 
\t cursor:pointer; 
 
\t z-index:10000; 
 
} 
 

 
.polaroid1{ 
 
\t box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5); 
 
\t -webkit-backface-visibility: hidden; 
 
\t transform: rotate(-8deg); 
 
\t margin-bottom:30px; 
 
\t width:380px; 
 
\t height:320px; 
 
\t background-color:rgba(255, 255, 255, 1.0); 
 
\t text-align:right; 
 
\t padding-top:10px; 
 
\t padding-right:10px; 
 
\t padding-left:10px; 
 
\t padding-bottom:15px; 
 
\t top:15px; 
 
\t left:25px; 
 
\t position:relative; 
 
} 
 

 
.photo1{ 
 
\t width:100%; 
 
\t height:85%; 
 
\t position:relative; 
 
\t padding:5px; 
 
} 
 

 
.date1{ 
 
\t margin:0; 
 
\t padding-right:10px; 
 
\t font-family: 'Covered By Your Grace', cursive; 
 
\t transform: rotate(-5deg); 
 
\t font-size:28px; 
 
} 
 

 
.mySlides1{ 
 
\t display:none; 
 
\t width:380px; 
 
\t height:320px; 
 
\t position:absolute; 
 
\t top:0px; 
 
\t left:0px; 
 
} 
 

 
.currentslide{display:block;}

<div id="polaroid1" class="polaroid1"> 
 
    <img class="play" src="images/heart.png"> 
 
    <div class="mySlides1 fade currentslide"> 
 
    <img class="photo1" src="images/IMG-20170610-WA0028.jpg"> 
 
    <h3 class="date1">22-05-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/20170812_181516.jpg"> 
 
    <h3 class="date1">12-08-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/20170522_112958.jpg"> 
 
    <h3 class="date1">22-05-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/IMG-20170610-WA0017.jpg"> 
 
    <h3 class="date1">10-06-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/20170819_194526.jpg"> 
 
    <h3 class="date1">19-08-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/20170811_182103.jpg"> 
 
    <h3 class="date1">11-08-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/20170522_124602.jpg"> 
 
    <h3 class="date1">22-05-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/20170419_020725.jpg"> 
 
    <h3 class="date1">19-04-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/20170520_115819.jpg"> 
 
    <h3 class="date1">20-05-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/20170822_011703.jpg"> 
 
    <h3 class="date1">22-08-2017</h3> 
 
    </div> 
 
    <div class="mySlides1 fade"> 
 
    <img class="photo1" src="images/20170705_184344.jpg"> 
 
    <h3 class="date1">05-07-2017</h3> 
 
    </div> 
 
</div>

Answer 1

인가 :

이 내 코드?

var stop = true; 

나는 부울 아닌 것 같아요,하지만 당신은 참 또는 거짓으로 VAR를 사용하려는 경우 VARCHAR은 :) 는 :

$('.play').click(function(){ 
    stop = "false"; 
    alert(stop); 
}); 
if(stop == "false"){ 

는

Answer 2

작동합니다 당신은 당신의 플레이 이벤트 리스너를 배치해야 문서 준비 기능 내부. 오염 된 네임 스페이스가 생길 때처럼 전역 변수를 사용하지 마십시오.

편집 : Taplar가 언급 한 것처럼 범위 문제는 아닙니다. 코드를 충분히 읽지 못했습니다. 클릭하면 코드가 예상대로 실행되지 않습니다.

문서가 준비되면 경고 (중지) 및 setInterval이 한 번만 실행됩니다.

반복적으로 작동하려면 이벤트 리스너 내에서 예외 조치를 실행해야합니다.

$(document).ready(function(){ 
    var stop = true; 

    // Assume swapSlides is defined and can be called 

    $('.play').click(function(){ 
     stop = false; 
     alert(stop); 
     setInterval(swapSlides, 3000); 
    });