讓無盡的jQuery變得簡單

-4

我的WordPress網站上有一個手風琴。讓無盡的jQuery變得簡單

通常，它可以很好地工作，在點擊不同的標籤頁時添加和刪除類，但網站上的其中一個手風琴存在問題：點擊其中一個標籤時，它不會關閉其餘的打開標籤。所以我加入這個代碼，它工作正常：

jQuery(document).ready(function($) { 
    $("#top11").click(function() { 
    $("#collapse202").removeClass("in"); 
    $("#collapse203").removeClass("in"); 
    }); 
    $("#top12").click(function() { 
    $("#collapse201").removeClass("in"); 
    $("#collapse203").removeClass("in"); 
    }); 
    $("#top13").click(function() { 
    $("#collapse201").removeClass("in"); 
    $("#collapse202").removeClass("in"); 
    }); 

});

我肯定是有辦法使它更短，可能有人請解釋如何做到這一點更緊湊？

來源

2016-01-20 kloshar4o

我們應該猜問題手風琴的模樣？ – Shomz

爲他們提供所有共享課程，然後關閉該課程的所有選項卡。然後使用其ID來打開特定的選項卡。 –

不需要給他們全部特殊的課程，只需選擇所有與jQuery的兄弟姐妹，關閉它們就足夠了。說，你需要分享你的HTML @Shomz指出。 –

如果你的HTML看起來像，您可以使用next()功能爲目標的下一個同級元素：

$("#top11, #top12, #top13").click(function() { 
 
\t $("#top11, #top12, #top13").next().removeClass("in"); 
 
\t $(this).next().addClass("in"); 
 
});

.in { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="top11">top11</div> 
 
<div id="collapse201" class="in">collapse201</div> 
 
<div id="top12">top12</div> 
 
<div id="collapse202" class="in">collapse202</div> 
 
<div id="top13">top13</div> 
 
<div id="collapse203" class="in">collapse203</div>

來源

2016-01-20 12:46:36

如果有50個標籤怎麼辦？你會一一列出他們所有的人嗎？所有的方式'$（「＃top01，＃top02，＃top03，＃top04，.............，top50」）。click（function（$（「＃top01，＃top02，＃top03，＃top04，.............，top50「）'？ –

一種方法是將data-id添加到每個摺疊元素。例如：

<div id="collapse201" data-id="top11"></div> 
<div id="collapse202" data-id="top12"></div> 
<div id="collapse203" data-id="top13"></div>

當然，你應該用你的標籤類，以防萬一有很多在你的手風琴標籤：

<div id="top11" class="clickingTab"></div> 
<div id="top12" class="clickingTab"></div> 
<div id="top12" class="clickingTab"></div>

JS代碼看起來是這樣的，那麼：

jQuery(document).ready(function($) { 
    $(".clickingTab").click(function() { 
    var clickedId = $(this).attr("id"); 
    $("element:not([data-id="+clickedId+"])").removeClass("in"); 
    }); 
});

當然可以有更有效的方法來解決您的問題。但對於這個特定的問題，這可能是特定的解決方案。

來源

2016-01-20 12:40:48

與上述相同的評論。如果有50個標籤怎麼辦？你會列出他們中的每一個，一個接一個，全部50個？ –

@JeremyThille論戰。首先，你必須擺脫你的理智才能製作50鍵手風琴。用戶友好的設計？從來沒有聽說過。其次，正如我所指出的，可能會有更好的解決方案。當然，我會使用一個類而不是50個ID但由於作者從未提供過HTML代碼... –

@JeremyThille忘記了說，儘管如此，你確實有一點，我編輯了我的回答關於你的評論 –

讓無盡的jQuery變得簡單

回答

相關問題