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

Question

我想将切换属性添加到 mysite。当我单击隐藏/显示按钮时，它应该显示/隐藏 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

Answer 2

如果您的命名一致，只需创建一个切换功能并传递要切换的字母。

<script>
$(document).ready(function() {

   $('#button_letter_'+ letter).click(function() {
        custom_accordion(letter);
    });
   }

function custom_accordion(letter){
           $('#portfolio_item_'+letter).toggle();
}

});
</script> 

通过传递你想要的字母来调用点击函数......

这个链接有关于 jquery custom toggle的解释