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秒钟内随意更改index的值。默认值为0，但是如果在这5秒钟内单击第一个按钮，则index的值将更改为1。第二个按钮相同。

Answer 2

单击其中一个按钮时发生的事情是您在单击处理程序函数中定义的（请参见here）：

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

您对alert（）的调用驻留在就绪功能内部，因此仅在加载页面时调用。您需要将警报放入点击处理程序中，以将其称为“点击”。这样做，所有三个版本都应该工作。应该看起来像这样：

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

编辑后：

此处相同：在加载页面后，单击任何按钮之前，创建注释后的选择器字符串。之后再也没有那时，它的计算结果为"button[id^=myButtonundefined]"，因为索引还没有定义的值。 T ##是此功能，因此，只要您单击ID以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 Problem是什么，以便将来正确回答您的问题。

强烈推荐阅读：Decouple your HTML, CSS and 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 ，并且我们必须为每个按钮编写更多代码 。 kes。相反，我们可以使用类和带有data()的 data-attribute 来简化并使其更健壮。

$(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/>

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

3 个答案: