jquery - 如何在jquery中编写快速切换列表？

Question

我想向我的网站添加切换属性。当我单击隐藏/显示按钮时，它应该显示/隐藏 div。按照字母顺序，用户点击某个字母就会显示以该字母开头的内容。所以我的代码在这里:

<script>
$(document).ready(function() {
    $('#button_letter_A').click(function() {
        $('#portfolio_item_A').toggle();

    });
     $('#button_letter_B').click(function() {
        $('#portfolio_item_B').toggle();
    });
});
</script>

而不是按顺序写下所有字母；如何快速编写这段代码。例如;我可以用 JavaScript 中的 for 循环来实现吗？

Answer 1

// target everything with IDs that start with 'button_letter'
$("[id^='button_letter']").click(function () {

    // split the letter out of the ID
    // of the clicked element and use it to target
    // the correct div
    $("#portfolio_item_" + this.id.split("_")[2]).toggle();
});

引用:

• http://api.jquery.com/attribute-starts-with-selector/
• https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split