Jquery刪除多個（重複）ID上的類

Question

你好我有2個菜單選項卡在同一頁面，但不同的ID，並希望用jQuery來處理它。

現在我知道它顯示和隱藏<div>，但我無法從正確的tablink中刪除該類。

$(document).ready(function(){ 

    $('.tablinks').click(function(){ 
     var tab_id = $(this).attr('show'); 
     var tabHide = $(this).attr('hide'); 

     $('#tab'+tabHide).removeClass('active'); 
     $("#date"+tabHide+", #seo"+tabHide+", #links"+tabHide+", #notat"+tabHide).hide(); 

     $(this).addClass('active'); 
     $("#"+tab_id).show(); 
    }); 

}); 

我有這個listner到菜單選項卡。

然後我得到了2個菜單：

<button id="tab2" hide="2" show="date2" class="tablinks active">Dato</button> 
<button id="tab2" hide="2" show="seo2" class="tablinks">SEO</button> 

而且

<button id="tab3" hide="3" show="date3" class="tablinks active">Dato</button> 
<button id="tab3" hide="3" show="seo3" class="tablinks">SEO</button> 

任何人都可以指導我在這裏？

我的循環：

$x = mysqli_query($mysql_link, "SELECT * FROM dagenshug_imageslider"); 
    while ($row = mysqli_fetch_assoc($x)) { 

     $imageslider = $row; 

     echo " 
     <div style=\"width: 98%; border: 1px solid #dddedf; border-radius: 5px; min-height: 100px; margin-top: 15px; overflow: hidden; min-height: 335px;\"> 
      <div style=\"margin: 8px; border-bottom: 1px solid #dddedf;\"><img src=\"https://dagenshug.dk/NewBackOffice/gfx/icons/payment-icon.jpg\" style=\"padding-right: 5px;\">#".$imageslider['id']." - Unique click: ".$imageslider['clicks']."</div> 
      <div style=\"clear: both; float: left; width: 20%; margin: 10px;\"><img src=\"https://dagenshug.dk/gfx/banner/".$imageslider['image_link']."\" style=\"width: 100%;\"></div> 
      <div style=\"float: left; width: 75%; margin: 10px;\"> 
       <div class=\"tab\"> 
        <button id=\"tab".$imageslider['id']."\" hide=\"".$imageslider['id']."\" show=\"date".$imageslider['id']."\" class=\"tablinks active\">Dato</button> 
        <button id=\"tab".$imageslider['id']."\" hide=\"".$imageslider['id']."\" show=\"seo".$imageslider['id']."\" class=\"tablinks\">SEO</button> 
        <button id=\"tab".$imageslider['id']."\" hide=\"".$imageslider['id']."\" show=\"links".$imageslider['id']."\" class=\"tablinks\">Links</button> 
        <button id=\"tab".$imageslider['id']."\" hide=\"".$imageslider['id']."\" show=\"notat".$imageslider['id']."\" class=\"tablinks\">Notat</button> 
        </div> 
       <div id=\"date".$imageslider['id']."\" class=\"tabcontent\" style=\"display: block\"> 
        <b>Start dato</b><br> 
        <br> 
        <input type=\"date\" id=\"startdate\" class=\"input-imageslider\" value=\"".$imageslider['date_start']."\"><br> 
        <br> 
        <b>Slut dato</b><br> 
        <br> 
        <input type=\"date\" id=\"enddate\" class=\"input-imageslider\" value=\"".$imageslider['date_end']."\"><br> 
        <br> 
       </div> 
       <div id=\"seo".$imageslider['id']."\" class=\"tabcontent\" style=\"border: 0px;\"> 
        <b>Alt tekst</b><br> 
        <br> 
        <textarea cols=\"80\" rows=\"11\" class=\"input-imageslider\">".$imageslider['alt_text']."</textarea> 
       </div> 
       <div id=\"links".$imageslider['id']."\" class=\"tabcontent\"> 
        <b>Link til side</b><br> 
        <br> 
        <input type=\"date\" id=\"startdate\" class=\"input-imageslider\" value=\"".$imageslider['date_start']."\"><br> 
        <br> 
        <b>Slut dato</b><br> 
        <br> 
        <input type=\"date\" id=\"enddate\" class=\"input-imageslider\" value=\"".$imageslider['date_end']."\"><br> 
        <br> 
       </div> 
       <div id=\"notat".$imageslider['id']."\" class=\"tabcontent\"> 
        <h3>Notat</h3> 
       </div> 
      </div> 
     </div>"; 


    } 

Answer 1

你的問題是你有重複的ID。

jQuery id selector $("#myId")只會帶一個元素，即使它有幾個具有該ID。

因此，對於您的情況，最快的解決方案是用the attribute equals selector替換id選擇器。換句話說，變：

$("#myDuplicatedId") 

到

$("[id=myDuplicatedId]") 

在你的代碼，這意味着改變那些中間線：

$('[id=tab'+tabHide+']').removeClass('active'); 
$("[id=date"+tabHide+"], [id=seo"+tabHide+"], [id=links"+tabHide+"], [id=notat"+tabHide+"]").hide(); 

查了demo fiddle here。

---

話雖這麼說，如果可能的話，如果你刪除了這些重複的ID可能會更好 - 這是無效的HTML - 和使用類，而不是。

這是demo fiddle of how that (using classes instead of IDs) would work。下面是我所做的：

• 從刪除的ID，並添加類到<button>小號
• 改變了JS代碼的第7行。
  • 你可能不得不改變線路8以及...