Question

我正在使用播放/暂停按钮编码图像滑块，除非单击播放按钮，否则滑块不会工作，为此我使用名为stop的布尔变量，默认情况下stop为false。

由于某种原因，一旦我点击播放按钮，布尔值变为true（我看到这个带有警告）但滑块不会播放。

我使用简单的if检查stop是否为false。

这是我的代码：

＆＃13;

<script>

var stop = true;

$('.play').click(function(){
  stop = "false";
  alert(stop);

});


$(function(){
    alert(stop);
    if(stop == "false"){

    setInterval(swapSlides,3000);

    function swapSlides(){
	var cs = $('div.currentslide:first');
	var ns = cs.next();
	if(ns.hasClass('mySlides1')){
	cs.removeClass('currentslide');
	ns.addClass('currentslide');
    }
	else{
	ns = $('#polaroid1').children('div.mySlides1:first');
	cs.removeClass('currentslide');
	ns.addClass('currentslide');
	}
	}
	}
});
</script>

＆＃13;

.play{
	position:absolute; 
	left:5px; 
	bottom:5px; 
	cursor:pointer; 
	z-index:10000;
}

.polaroid1{
	box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5); 
	-webkit-backface-visibility: hidden; 
	transform: rotate(-8deg); 
	margin-bottom:30px; 
	width:380px; 
	height:320px; 
	background-color:rgba(255, 255, 255, 1.0); 
	text-align:right; 
	padding-top:10px; 
	padding-right:10px; 
	padding-left:10px; 
	padding-bottom:15px; 
	top:15px; 
	left:25px; 
	position:relative;
}

.photo1{
	width:100%;  
	height:85%; 
	position:relative;
	padding:5px;
}

.date1{
	margin:0; 
	padding-right:10px; 
	font-family: 'Covered By Your Grace', cursive; 
	transform: rotate(-5deg);
	font-size:28px;
}

.mySlides1{
	display:none;
	width:380px; 
	height:320px; 
	position:absolute; 
	top:0px; 
	left:0px;
}

.currentslide{display:block;}

＆＃13;

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

＆＃13;

Answer 1

您应该将play事件侦听器放在document ready函数中。您应该避免使用像这样的全局变量，因为它会导致污染的命名空间。

编辑：正如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);
    });

Answer 2

这是你的布尔值吗？

var stop = true;

我猜它不是布尔值，而是varchar :) 如果要将var用作true或false：

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

将起作用

jquery中的布尔比较不起作用？

2 个答案: