jqueryのブール比較が機能していませんか？

Question

再生/一時停止ボタン付きの画像スライダをコーディングしていますが、再生ボタンがクリックされない限り、スライダは機能しません。これは、stopというブール変数を使用しています。

何らかの理由で再生ボタンをクリックするとブール値がtrueに変わります（警告が表示されます）が、スライダは再生されません。

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が1回だけ実行されます。

イベントリスナー内で例外処理を実行して、繰り返し実行する必要があります。

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

    // Assume swapSlides is defined and can be called 

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