Question

我正在尝试使用for循环缩小javascript代码，我是javascript的新手，但我认为这样可行，

我试图让它变小：

   $("li#li_item1").click(function(){
    all();
    $("div#item1").fadeIn("fast");
})

$("li#li_item2").click(function(){
    all();
    $("div#item2").fadeIn("fast");
})

$("li#li_item3").click(function(){
    all();
    $("div#item3").fadeIn("fast");
})

$("li#li_item4").click(function(){
    all();
    $("div#item4").fadeIn("fast");
})

使用此：

    var AantalItem = 159;

    for(var k=0;k<=AantalItems;k++) {
    $("li#li_item" + k).click(function(){
        all();
        $("div#item" + k).fadeIn("fast");
    })

    document.getElementById("test").innerHTML=k;
}

当使用较小的代码时，淡入淡出就不会起作用

这是all（）：

    var all = function(){
    for(var i=0;i<=AantalItems;i++) {
        $("div#item" + i).fadeOut("fast");
    }
};

Answer 1

这是由于关闭效应。

试试这个：

for(var k=0;k<=AantalItems;k++) {
  $("li#li_item" + k).click(createClickFunction(k));
}

function createClickFunction(k) {
     return function() {
            all();
            $("div#item" + k).fadeIn("fast");
        }
}

Answer 2

你可以创建一个函数来返回一个函数并将k传递给它：

for(var k=0;k<=AantalItems;k++) {
    $("li#li_item" + k).click((function(k){
        return function() {
            all();
            $("div#item" + k).fadeIn("fast");
        }
    })(k));

或者只是为这些项添加一个公共类，并将对象的id链接到它的data属性 - 然后整个代码看起来像：

$('.commonClass').click(function() {
    $('.anotherCommonClassForDivs').fadeOut("fast");
    $('div#' + $(this).data('id')).fadeIn("fast");
});

和html：

<li class="commonClass" data-id="item1">whatever</li>
<li class="commonClass" data-id="item2">whatever</li>

<div class="anotherCommonClassForDivs" id="item1">data for item1</div>
<div class="anotherCommonClassForDivs" id="item2">data for item2</div>

LIVE DEMO

Answer 3

试试这个..

  function fadeinAll() {
         $('li#li_item').find('div').each(function () { $(this).fadeIn("fast"); })
     }
     function fadeoutAll() {
         $('li#li_item').find('div').each(function () { $(this).fadeOut("fast"); })
     }

Javascript函数不适用于for循环

3 个答案: