Question

我正在尝试使用while循环来简化我的代码，但似乎无法附加值。这是一个例子

  var x=1;
  while(x <= 20){
    $('.analytics' + x).click(function(event){
        analytics(x);
    });
    x++
  }

  var analytics = function(num){
    alert(num);
  };

每当我点击包含button class的{{1}}时，如果我预计它为1,2,3,4,5，则返回值20。我有一个含糊的想法，即我将{20}传递给analytics1-5，因为当我点击function analytics时，while循环已经结束。有人可以向我解释一下吗？

Answer 1

编辑：我对你的问题编辑有点过分热心。如果我抛弃其他回答的人，我道歉。

您遇到了范围/绑定问题。自从我处理过＆lt; ES6，我真的很难记住如何解决它。我已经更新了我的答案，有一个可能的解决方案。

这种SO比我做得更好： Javascript infamous Loop issue?

$(document).ready(function() {
  for (var i=1; i<=5; i++) {
      $('.analytics' + i).click(function(event) {
        analytics($(this).index());
      });
  }

  function analytics(num) {
    console.log(num);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="analytics1">A1</div>
<div class="analytics2">A2</div>
<div class="analytics3">A3</div>
<div class="analytics4">A4</div>

原始无关答案：

呃，你是多重绑定的。您已将20个点击事件绑定到该DOM片段。点击后，您只看到最后一个。

循环不等待您单击。您可以通过将console.log(x);置于循环内并点击F12来确认这一点，以便在您点击之前查看所有20个事件已经绑定。

Answer 2

你基本上是在告诉它，一旦被点击，数到21并执行该功能20次。

我认为你的意思只是在逻辑中进行快速调整;

pd.to_datetime(gdf['sale_date'],format='%m%d%Y')
gdf.sort('sale_date',ascending=False)

var x=1;
$('.analytics').click(function(event){
  while(x <= 20){   
      console.log(x);    
    x++
  }
 });

button {
  padding: 1rem;
}

其中示例我只是在那里打了一个console.log，但你可以执行你的方法。希望这会有所帮助，欢呼。

Answer 3

试试这个：

      var x = 1;
    $(document).on('click','.analytics',function(){
      while(x <= 20){
        analytics(x);
            x++;
  }
    });
    function analytics(num){
        alert(num);
      };

Answer 4

基于之前回答的先前评论的新答案。

＆＃13;

$(document).ready(function() {
  $('.analytics').on('click', function(event) {
    analytics($(this).data("id"));
  });

  function analytics(num) {
    console.log(num);
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="analytics" data-id=1>A1 id1</div>
<div class="analytics" data-id=2>A2 id2</div>
<div class="analytics" data-id=42>A3 id42</div>
<div class="analytics" data-id=17>A4 id17</div>

＆＃13;

如果将来有人发现这个问题。

ES6允许您使用let。

解决了这个问题

＆＃13;

$(document).ready(function() {
  for (let i = 1; i <= 5; i++) {
    $('.analytics' + i).click(function(event) {
      analytics(i);
    });
  }

  function analytics(num) {
    console.log(num);
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="analytics1">A1</div>
<div class="analytics2">A2</div>
<div class="analytics3">A3</div>
<div class="analytic4s">A4</div>

＆＃13;

Answer 5

这对我来说很有把戏

  for (var i=1; i<=20; i++) {

    function clickHandler(num) {    
        $(".analytics" + i).click (function(event){
            analytics(num);
        })
    }
    clickHandler(i);

  }

感谢链接@mkaatman

使用While循环简化代码

5 个答案: