在JS和X之間應用一個循環

所以我一直在想如何以合理的方式解釋這個問題，但我會在下面給你看，因爲它更有意義。在JS和X之間應用一個循環

我有這個代碼工作正常，但我想縮短到每個循環或什麼東西。

$('.holder1').on({ 
    click: function(){ 
    $('.box1').css({display: 'none'}); 
    $('.text1').css({display: 'block'}); 
    } 
}); 

$('.holder2').on({ 
    click: function(){ 
    $('.box2').css({display: 'none'}); 
    $('.text2').css({display: 'block'}); 
    } 
}); 

$('.holder3').on({ 
    click: function(){ 
    $('.box3').css({display: 'none'}); 
    $('.text3').css({display: 'block'}); 
    } 
});

我有這個問題，最多40+，顯然這個代碼是可怕的。

來源

2013-10-09 Mike Meade

顯示一些html，這將有助於提供良好的答案 – Gowri

你應該考慮給所有人添加一個普通的類，所以你只有一個選擇器。如果可能的話。 – MildlySerious

同意@gowri，您的標記很重要，請張貼。 – georg

試試這個：使用類.box的和替代的.text

來源

2013-10-09 09:53:14

問題是在每個處理程序中'.box'和'.text1'的改變。 –

for (var i = 0; i< 40; i++) { 
$('.holder' + i).on({ 
    click: function(){ 
    $('.box' + i).css({display: 'none'}); 
    $('.text' + i).css({display: 'block'}); 
    } 
}); 
}

或只需添加一個通用類，並使用它。

來源

2013-10-09 09:54:10 Praveen

您可以重構HTML代碼以使用普通類和data屬性。事情是這樣的：

<div class="holder" data-box="box1" data-text="text1"></div> 
<div class="holder" data-box="box2" data-text="text2"></div> 
<div class="holder" data-box="box3" data-text="text3"></div>

然後你就可以有一個單一的點擊處理程序的所有類：

$('.holder').on({ 
    click: function(){ 
     $('.' + $(this).data('box')).css({ display: 'none' }); 
     $('.' + $(this).data('text')).css({ display: 'block' }); 
    } 
});

這就避免了難看的循環來添加多個處理程序，並反覆id屬性，它總是輪流需求到維護噩夢。

來源

2013-10-09 09:55:19

+1我同意**維護噩夢** – Praveen

爲了解決這個問題，可以重複使用jQuery Attribute Starts With選擇（API docs）在holder元素：

$.each('[class^="holder"]', function(index, item) { 
    $(item).on('click', function() { 
     $('.box' + index).css({display: 'none'}); 
     $('.text' + index).css({display: 'block'}); 
    }); 
});

我寧願使用一些通用類，不過，因爲羅裏McCrossan在他的回答中指出。

來源

2013-10-09 09:55:46

+1我錯過了給jQuery版本的循環。我喜歡這個 – Praveen

生病的果醬，先生。從來沒有見過如此美麗的方式來做到這一點。「^」在「課」之後代表什麼？ – briosheje

@briosheje'^'選擇器手段，所有具有以「持有者」開頭的title屬性值的元素 – Praveen

用途：

$("*[class^='holder']").on({ 
    click: function(){ 
     var id = $(this).attr("class").replace("holder",""); 
     $('.box'+id).css({display: 'none'}); 
     $('.text'+id).css({display: 'block'}); 
    } 
});

來源

2013-10-09 10:02:42 Salim

'我有這種情況可以達到40+' – Praveen

好吧，它現在應該工作 – Salim

答案在選擇器中得到了簡化。它將工作40 + – Salim

假設持有者和箱子坐在各自的容器，就像

<div> 
    <div class="holder">a</div> 
    <div class="holder">b</div> 
    <div class="holder">c</div> 
    <div class="holder">d</div> 
</div> 

<div> 
    <div class="box">a</div> 
    <div class="box">b</div> 
    <div class="box">c</div> 
    <div class="box">d</div> 
</div>

你可以得到完全擺脫箱/文號：

$(".holder").click(function() { 
     var n = $(this).index(); 
     $(".box").eq(n).show(); 
    });

這添加新元素或更改順序會更容易。

來源

2013-10-09 10:10:22 georg

在JS和X之間應用一個循環

回答

相關問題