根據兩個目標的ID顯示/隱藏元素

首先，如果這是重複的，我想事先致歉，我確定解決方案已經存在，但我無法找到正確的方式來短語我的搜索，所以我空手而來。根據兩個目標的ID顯示/隱藏元素

我試圖建立一個冗長的形式，並隱藏它的部分，直到他們需要。我試圖創建一個「主」功能，以顯示相應的div，而不是爲每個20+部分創建一個功能。

我的計劃是讓id爲複選框，它將顯示該部分沿着id="test"的行，並且要顯示的部分將有id="test_2"。然後在JS中，我將簡單地將_2附加到將選擇要顯示的目標的代碼。

以下是我的代碼，在需要時根本不顯示div。關於如何使這個工作，或者甚至更好，更合適的解決方案的任何想法？謝謝！

$(".show").change(function(){ 
    if ($(this).val() == "1") { 
     $("#"+this.attr('id')+"_2").slideDown("fast"); 
    } 
    else { 
     $("#"+this.attr('id')+"_2").slideUp("fast"); 
    } 
});

HTML

<input type="checkbox" class="show" value="1" name="test" id="test" /> 
<div id="test_2"> 
    Hello World 
</div>

來源

2013-07-16 Dryden Long

數據屬性是魔語：

<input type="checkbox" class="show" value="1" name="test" data-id="test" /> 
<div id="test"> 
    Hello World 
</div>

$(".show").on('change', function(){ 
    $("#" + $(this).data('id'))[this.checked?'slideUp':'slideDown']('fast'); 
});

FIDDLE

做這種方式，這不要緊，你的標記是什麼樣子，它得到正確的元素每次，並且很容易剛纔設置的數據屬性標識。

旁註：不會的複選框的值總是1，你真的想看看它的檢查或不

來源

2013-07-16 19:21:50 adeneo

是的，我只是想看看它是否被選中與否。 –

認爲是這樣，所以這就是上面的代碼！ – adeneo

使用相對選擇，這樣你就可以廢除的ID。

$(".show").change(function(){ 
    if ($(this).val() == "1") { 
     $(this).next('div').slideDown("fast"); 
    } 
    ...etc... 
}

來源

2013-07-16 19:20:45

你可以像ID this.id

不要忘記使用===代替==

$(".show").on('change', function(){ 
    if ($(this).val() === "1") { 
     $("#"+ this.id + "_2").slideDown("fast"); 
    } 
    else { 
     $("#"+this.id + "_2").slideUp("fast"); 
    } 
});

來源

2013-07-16 19:21:19 Praveen

根據兩個目標的ID顯示/隱藏元素

回答

相關問題