Question

我正在尝试更改我的数组中包含的每个类的html。但是对于（var in in array）循环只处理最后一个数组元素。如何使它适用于array的每个元素。这是我的代码：

$(document).ready(function() {
    var a = [],
        array = [".1", ".2", ".3", ".4", ".5", ".6", ".7", ".8", ".9"];
    // a.push($(array[i]).html());
    for (var i in array) {
        $(array[i]).click(function() {
            $(array[i]).html(0);
        });
    }
});

在此处查看问题http://codepen.io/meow414/pen/rLJaPJ（其代码可能会更改，因为我将尝试解决此问题）。 HTML代码在这里：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-md-10">
            <div class="row">
                <div class="1 col-xs-4 col-md-4">1</div>
                <div class="2 col-xs-4 col-md-4">2</div>
                <div class="3 col-xs-4 col-md-4">3</div>
            </div>
            <div class="row">
                <div class="4 col-xs-4 col-md-4">4</div>
                <div class="5 col-xs-4 col-md-4">5</div>
                <div class="6 col-xs-4 col-md-4">6</div>
            </div>
            <div class="row">
                <div class="7 col-xs-4 col-md-4">7</div>
                <div class="8 col-xs-4 col-md-4">8</div>
                <div class="9 col-xs-4 col-md-4">9</div>
            </div>
        </div>
    </div>
</div>

Answer 1

使用for

删除join()循环并从数组中选择一个选择器

jQuery(function( $ ){

  var array=[".1",".2",".3",".4",".5",".6",".7",".8",".9"];

  $(array.join(",")).click(function(){
     $(this).html("Hello");
  });

});

目前你有一个数组

[".1",".2",".3",".4",".5",".6",".7",".8",".9"]

但你需要一个选择器

".1,.2,.3,.4,.5,.6,.7,.8,.9"

因此使用.join(",")

＆＃13;

jQuery(function( $ ){
  
  var array=[".1",".2",".3",".4",".5",".6",".7",".8",".9"];


  $(array.join(",")).click(function(){
     $(this).html("Hello");
  });

  
});

＆＃13;

[class^=col-]{background:#eee;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8 col-md-10">
      <div class="row">
        <div class="1 col-xs-4 col-md-4">1
        </div>
        <div class="2 col-xs-4 col-md-4">2
        </div>
        <div class="3 col-xs-4 col-md-4">3
        </div>
      </div>
      <div class="row">
        <div class="4 col-xs-4 col-md-4">4
        </div>
        <div class="5 col-xs-4 col-md-4">5
        </div>
        <div class="6 col-xs-4 col-md-4">6
        </div>
      </div>
      <div class="row">
        <div class="7 col-xs-4 col-md-4">7
        </div>
        <div class="8 col-xs-4 col-md-4">8
        </div>
        <div class="9 col-xs-4 col-md-4">9
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

另请注意，使用Number作为类无效。在JS中工作将在CSS中失败。（另一方面，P.S：ID为数字在HTML5中有效）

Answer 2

问题是每个匿名函数中的变量i都绑定到函数外部的同一个变量。

您可以在事件处理函数中使用this引用：

＆＃13;

var array = [".1", ".2", ".3", ".4", ".5", ".6", ".7", ".8", ".9"];

for (var i in array) {
    $(array[i]).on('click', function() {
        $(this).html(0);
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-md-10">
            <div class="row">
                <div class="1 col-xs-4 col-md-4">1</div>
                <div class="2 col-xs-4 col-md-4">2</div>
                <div class="3 col-xs-4 col-md-4">3</div>
            </div>
            <div class="row">
                <div class="4 col-xs-4 col-md-4">4</div>
                <div class="5 col-xs-4 col-md-4">5</div>
                <div class="6 col-xs-4 col-md-4">6</div>
            </div>
            <div class="row">
                <div class="7 col-xs-4 col-md-4">7</div>
                <div class="8 col-xs-4 col-md-4">8</div>
                <div class="9 col-xs-4 col-md-4">9</div>
            </div>
        </div>
    </div>
</div>

＆＃13;

但根据您的HTML，最简单快捷的方法是：

$('.col-md-4').click(function() {
    $(this).html(0);
});

Answer 3

的forEach（）;工作得更好。解决方案：

    $(document).ready(function(){
var a=[],array=[".1",".2",".3",".4",".5",".6",".7",".8",".9"];
   // a.push($(array[i]).html());
  array.forEach(function(i){ $(i).click(function(){
    $(i).html(0);
   });
   }
   );

  });

或者

for(var i in array){
  $(array[i]).click(function(){
    $(this).html(0); //this to take current instance
   });
   }

因为in循环只影响数组的最后一个元素，我希望我的代码可以处理数组的每个元素

3 个答案: