Question

我有以下这样的HTML：

<span class="product1 automaticAdds">Foo</span>
<span class="product2 automaticAdds">Foo</span>
<span class="product3 automaticAdds">Foo</span>

我想要发生的是，当你点击一个跨度时，它会调用onclickfunction，即function2。但是，id和urltogo的值都是未定义的。我查看并遵循其他SO问题的建议，但仍然没有工作。如何才能获得正确的值？

$(document).ready(function() {

var uniqueProducts = document.getElementsByClassName("automaticAdds");
var urls=['http://www.aol.com','http://www.google.com','http://www.yahoo.com'];


for (var i = 0; i < uniqueProducts.length; i++) {
 var ids=i;

        $(".product" + ids).click((function(ids) {
            return function() { function2(ids,urls[ids]); };
    })()); //end click
} //end for



function function2(ids,urltogo){

console.log(ids);
console.log(urltogo);

}


}) //end everything

Answer 1

您必须将ids传递给IIFE（立即调用的函数表达式）：

})(ids))

工作代码：

$(document).ready(function() {

  var uniqueProducts = document.getElementsByClassName("automaticAdds");
  var urls=['http://www.aol.com','http://www.google.com','http://www.yahoo.com'];

  for (var i = 0; i < uniqueProducts.length; i++) {
    var ids=i;

    $(".product" + ids).click((function(ids) {
      return function() { function2(ids,urls[ids]); };
    })(ids)); //end click
  } //end for



  function function2(ids,urltogo){
    console.log(ids);
    console.log(urltogo);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="product1 automaticAdds">Foo</span>
<span class="product2 automaticAdds">Foo</span>
<span class="product3 automaticAdds">Foo</span>

在for循环中包含Javascript单击功能

1 个答案: