如何检查 jQuery int 变量是否发生了变化?

Question

我目前正在使用 jQuery 制作一个简单的滑块，我只显示带有.slice((slideIndex - 1), slideIndex)<ul>的第一个元素，其中变量slideIndex默认等于 1。

我有一个函数可以将 +1 添加到该值，但该值不会更改。

这是一个JSFiddle

这是我尝试过的，为什么我的变量没有改变？如何检查它是否已更改？

Answer 1

全局变量的值确实在函数中发生了变化，但您没有对<li>的可见性状态执行任何操作。.hide()和.show()函数仅在页面加载后执行一次。

我准备了一个替代脚本，希望能做到你想要的：

每次单击该按钮时，它都会执行以下操作：

• 它.hide()jquery 选择$('#slider li')中的所有<li>元素，
• 然后它找到idx-th<li>元素并使其再次可见 (.show())
• 这样做时，它会idx递增到下一个值
• 最后，附加的.click()触发加载后的第一个按钮单击。

构造(idx%len)确保.eq()位置限制为现有值。

const ul=$('#slider li'),len=ul.length;
var idx=0;
$('#controlNext').click(ev=>ul.hide().eq((idx++)%len).show()).click()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="controlNext">next</button>
<div id="slider">
<ul>
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
<li>slide4</li>
<li>slide5</li>
</ul>
</div>

脚本的稍微"干净"的版本(较少的全局常量和变量)如下：

const ul=$('#slider li');
ul.idx=0
$('#controlNext').click(ev=>ul.hide().eq((ul.idx++)%ul.length).show()).click()

ul是现在唯一的全局const，里面保存着jquery对象及其<li>集合。然后，我直接使用它的.length属性并向其添加一个额外的属性.idx(而不是使用全局变量)。