獨立ID的jQuery動作

我有一個工作網頁，但我想概括一下代碼。當點擊鏈接時，例如錨＃11或＃12，一個div被稱爲＃T11或＃T12將打開（或關閉）這一段腳本：獨立ID的jQuery動作

腳本

$("#11").click(function() { 
$("#t11").toggle(); 
}); 

$("#12").click(function() { 
$("#t12").toggle(); 
});

剝離HTML

<div class="a"> 
    <table> 
    <tr><td><a id="11">Foo</a></td></tr> 
    <tr><td>Find out more about Foo</td></tr> 
    </table> 
</div> 
<div class="a"> 
    <table> 
    <tr><td><a id="12">Bar</a></td></tr> 
    <tr><td>Find out more about Bar</td></tr> 
    </table> 
</div> 

<div class="b" id="t11"> 
    <p>More info about Foo</p> 
</div> 
<div class="b" id="t12"> 
    <p>More info about Bar</p> 
</div>

相關CSS

.b { 
    display: none; 
}

然而，這很好，超過20個div變得複雜和難以維護。有沒有辦法減少代碼，因此<a>中的每個ID都會切換其<div>？我一直在努力與$this，但沒有我所希望的結果。

來源

2015-09-03 TheFlyingDutchman

試試這個。 $（「.aa [id]」）.click（function（）{（'＃'+ $（this）.attr（「id」））。toggleClass（「b」）; }）;'' –

您可以使用與所有適當的<a>元素匹配的選擇器，以便您的點擊功能將應用於所有元素。然後，您可以使用$(this).attr('id')從<a>標記中獲得id屬性。然後，您可以形成一個與您想要切換的內容的相應ID相匹配的選擇器，然後使用該選擇器調用.toggle()方法。

$('.a table tr td a').click(function() { 
 
    var id = $(this).attr('id'); 
 
    var selector = '#t' + id; 
 
    $(selector).toggle(); 
 
});

.b { 
 
    display: none; 
 
} 
 
a:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="a"> 
 
    <table> 
 
    <tr> 
 
     <td><a id="11">Foo</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Find out more about Foo</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<div class="a"> 
 
    <table> 
 
    <tr> 
 
     <td><a id="12">Bar</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Find out more about Bar</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
<div class="b" id="t11"> 
 
    <p>More info about Foo</p> 
 
</div> 
 
<div class="b" id="t12"> 
 
    <p>More info about Bar</p> 
 
</div>

編輯

你也可以考慮增加一個類你的實際<a>標籤，由@Lelio Faieta提及。

在上例中，如果您的html結構發生更改，$('.a table tr td a')選擇器將會中斷，並且點擊功能將丟失。

但是，如果你指定一個類的，說toggler每個<a>標籤，那麼你可以只用$('.toggler')更換$('.a table tr td a')選擇，如果你改變你的HTML你<a>標籤的位置的點擊功能仍然可以工作。

$('.toggler').click(function() { 
 
    var id = $(this).attr('id'); 
 
    var selector = '#t' + id; 
 
    $(selector).toggle(); 
 
});

.b { 
 
    display: none; 
 
} 
 
a:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="a"> 
 
    <table> 
 
    <tr> 
 
     <td><a id="11" class="toggler">Foo</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Find out more about Foo</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<div class="a"> 
 
    <table> 
 
    <tr> 
 
     <td><a id="12" class="toggler">Bar</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Find out more about Bar</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
<div class="b" id="t11"> 
 
    <p>More info about Foo</p> 
 
</div> 
 
<div class="b" id="t12"> 
 
    <p>More info about Bar</p> 
 
</div>

來源

2015-09-03 14:55:12

真棒，這解決了一切，感謝您的快速響應！ – TheFlyingDutchman

您可以使用類組元素jQuery中。類就像是ID，但有一個點，而不是短跑引用：

$('.someClass')

，你用來寫

$('#anID')

許多對象可以共享相同的類，所以你既可以使用類目標同時對多個對象進行動畫或使用DOM上的不同元素來啓動動畫

來源

2015-09-03 14:55:38

解決此問題的最佳方法是向所有標記添加通用類並使用該類執行事件。

<a class="atag" id="11"> 
<a class="atag" id="12"> 


$(".atag").click(function() { 
    var id=$(this).attr("id"); 
    $(body).find("#"+id).toggle(); 
});

來源

2015-09-03 15:18:26

獨立ID的jQuery動作

回答

相關問題