Question

我有状态的html列表..所有“产品”类代表有地方的产品..（那就是光明视图）。它看起来像：

 <!-- product 1 -->
<div class="products" data-state="texas cali">
    <div class="product" data-state="texas"> ... </div>
    <div class="product" data-state="cali"> ... </div>
</div>
<!-- product 2 -->
<div class="products" data-state="utha arizona florida">
    <div class="product" data-state="utha "> ... </div>
    <div class="product" data-state="arizona"> ... </div>
    <div class="product" data-state="florida"> ... </div>
</div>

和一个javascript函数。此函数由一个状态（state ='cali'）工作。所有的div都可以看到'cali'。

jQuery( ".products[data-state~='" + state + "']" ).fadeIn(300, function(){
    jQuery( ".product[data-state~='" + state +"']" ).show();
});

但它是如何通过多个状态的数组迭代工作的。

var stateList = new Array("florida","utha","texas");

所以数组stateList中的所有状态都应该是可见的。非常感谢你。

Answer 1

最简单的方法是迭代数组并应用jquery fadeIn函数。

for (var i = 0; i < stateList.length; ++ i) {
  var state = stateList[i];
  jQuery( ".products[data-state~='" + state + "']" ).fadeIn(300, function(){
    jQuery( ".product[data-state~='" + state +"']" ).show();
  });
}

Answer 2

这样的东西？

jQuery.each(stateList, function () {
  var state = this; // Cache the state string.
  jQuery( ".products[data-state~='" + state + "']" ).fadeIn(300, function(){
    jQuery( ".product[data-state~='" + state +"']" ).show();
  });
 });

数组迭代的数据可见性 - javascript

2 个答案: