如何在jQuery选择器中更改全局变量?

Question

我正在开发一个使用 jQuery 的网站.在此代码中，我需要更改 Jquery 选择器中变量的值，并在它之后获取更改的值。有可能做到吗？我怎样才能做到这一点？如果可能的话，可以给我看一个片段/示例代码吗？

我尝试声明变量全局，但没有成功。

var index;
$(document).ready( function(){
$("#myButton1").click(function(){ //selector number 1
index = 1;
});
$("#myButton2").click(function(){//selector number 2
index = 2;
});
//after, i need the value of the index for another selector
//look this next selector is fired at the same time as the previous one!
$("button[id^=myButton"+index+"]").click( function(){  //selector number 3
...
}
}

如何使 1 号或 2 号选择器在 3 号选择器之后触发？可能吗？

Answer 1

Javascript 异步执行代码。换句话说，整个代码"同时"执行。所以首先，它将执行var index;.由于 jQuery.click正在等待您单击该按钮，因此它将跳过两个.click函数并继续发出警报。由于索引是未定义的，因此它会说index=undefined。若要解决此问题，请将警报移动到.click函数内，以便在单击按钮后执行警报。

var index;
$("#button1").click(function() {
index = 1;
alert("index = " + index);
});
$("#button2").click(function() {
index = 2;
alert("index = " + index);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1"></button>
<button id="button2"></button>

或者你可以这样做：

var index = 0;
$("#button1").click(function() {
index = 1;
});
$("#button2").click(function() {
index = 2;
});
setTimeout(function() {
alert("index = " + index);
}, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1"></button>
<button id="button2"></button>

上面的方法基本上在 5 秒后执行警报，因此您可以在这 5 秒内根据需要多次更改索引的值。默认值为 0，但如果在这 5 秒内单击第一个按钮，索引的值将更改为 1。第二个按钮相同。

Answer 2

单击其中一个按钮时发生的情况是您在单击处理程序函数中定义的事情(请参阅此处)：

$("#button1").click(function(){
window.index = 1; // only this line!!!
});

您对 alert() 的调用驻留在就绪函数中，因此仅在加载页面时调用。您需要将警报放入点击处理程序中，以将其称为"点击时"。这样做，所有三个版本都应该可以工作。应如下所示：

$("#button1").click(function(){
index = 1;
alert(index);
});

编辑后：

这里也一样：评论后的选择器字符串是在页面加载时创建的，在单击任何按钮之前。 之后再也不会了。 此时，它的计算结果为"button[id^=myButtonundefined]"，因为索引尚未定义值。T## 是函数，因此，只要您单击以myButtonundefined开头的按钮，就会执行 - 可能永远不会。

你想要实现的一切，你需要在点击处理程序函数中执行index的值。 例如：

$(document).ready( function(){
$("#button1").click(function(){
$("button[id^=myButton1]").click( function(){ 
...
});
});
$("#button2").click(function(){
$("button[id^=myButton2]").click( function(){ 
...
});
});
}

或者你可以尝试以下方法，在所有myButton...上安装一个点击处理程序，并在其中检查之前是否点击过相应的button...：

var index;
$(document).ready( function(){
$("#button1").click(function(){
index = 1;
});
$("#button2").click(function(){
index = 2;
});
//after, i need the value of the index for another selector:
$("button[id^=myButton]").click( function(){ 
if (this.id == 'myButton'+index) {
...
}
}
}

Answer 3

如何在 jQuery 选择器中更改全局变量？

请勿在此实例中使用全局变量。 您有可能与任何其他代码(jQuery 或您使用的任何其他脚本)发生变量冲突。 您只需将index放在文档中即可，并在示例代码中使用它，它将在没有任何冲突的情况下工作。

$(document).ready( function(){
var index;
$("#button1").click(function(){
index = 1;
});
$("#button2").click(function(){
index = 2;
});
//after, i need the value of the index for another selector:
$("button[id^=myButton"+index+"]").click( function(){ 
});

$('.js-getcurrentvalue').on('click', function() {
$('#currentvalue').val(index);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="js-getcurrentvalue" value="Get Current Value of Index"/><input type="text" id="currentvalue" /><br/>
<input type="button" id="button1" value="button1" /><br/>
<input type="button" id="button2" value="button1" /><br/>

但与此同时，选择器 $("button[id^=myButton"+index+"]").click( function(){ }); 触发。因此，两者都是同时执行的。我需要第二个选择器始终在第一个选择器之后执行。你知道我该怎么做吗？

这不是你问的原始问题。 请阅读什么是XY问题，以便您以后的问题可以得到正确回答。

强烈推荐阅读：解耦你的HTML，CSS和Javascript。

首先，我们需要了解，将事件处理程序附加到元素的每个语句都在执行事件处理程序之前运行。 因此，在我前面的示例中，注册了以下事件：

$("#button1").click()
$("#button2").click()
$("button[id^=myButton]").click();
$('.js-getcurrentvalue').on('click')

您会注意到，我已经完成了任何编译器都会执行的操作，并将变量缩减为其实际值。 在附加事件处理程序时，index没有值。 由于这不是你想要的，你可以这样写：

$("button").click(function() {
var $this = $(this);
var id = $this.prop(id);
if ($this.is("[id^=myButton"+index+"]") {
// do something as index changes
}
});

但它真的很丑陋，并引入了用于比较的值的抽象。 它也非常紧密耦合，也就是说，我们必须在要更改index的任何对象上放置一个事件，并且必须为每个按钮编写更多代码。 伊克斯。 相反，我们可以将类和数据属性与 data() 一起使用来简化并使其更加健壮。

$(document).ready( function(){
var selector;
$(".js-enable-button").on('click', function(){
selector = $(this).data('selector');
});
$('.js-enable-me').on('click', function() {
var $this = $(this);
if ($this.is(selector)) {
alert($this.val());
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="js-enable-button" value="Enable button -->" data-selector="#button1" />
<input type="button" class="js-enable-me" id="button1" value="Am I working?" /><br/>
<input type="button" class="js-enable-button" value="Enable button -->" data-selector="#button2" />
<input type="button" class="js-enable-me" id="button2" value="Or am I working?" /><br/>

现在代码不限于Id。 它也不限于单个选择器。 您可能会发疯，只需添加html，以下内容就可以继续适用于所有元素。 请注意，我没有添加其他代码。

$(document).ready( function(){
var selector;
$(".js-enable-button").on('click', function(){
selector = $(this).data('selector');
});
$('.js-enable-me').on('click', function() {
var $this = $(this);
if ($this.is(selector)) {
alert($this.val());
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="js-enable-button" value="Enable button -->" data-selector="#button1" />
<input type="button" class="js-enable-me" id="button1" value="Am I working?" /><br/>
<input type="button" class="js-enable-button" value="Enable button -->" data-selector="#button2" />
<input type="button" class="js-enable-me" id="button2" value="Or am I working?" /><br/>
<br/>
<input type="button" class="js-enable-button" value="I enable the three below me using id" data-selector="#id1,#id2,#id3" /></br>
<input type="button" class="js-enable-me" id="id1" value="id1" /><br/>
<input type="button" class="js-enable-me" id="id2" value="id2" /><br/>
<input type="button" class="js-enable-me" id="id3" value="id3" /><br/>
<br/>
<input type="button" class="js-enable-button" value="I enable the three below me using a class" data-selector=".enable" /></br>
<input type="button" class="js-enable-me enable" value="I'm .enable 1" /><br/>
<input type="button" class="js-enable-me enable" value="I'm .enable 2" /><br/>
<input type="button" class="js-enable-me enable" value="I'm .enable 3" /><br/>