jquery:使用"letters“作为id

Question

我正在建设的菜单，将显示一个字母的列表，然后加载适当的页面根据用户的选择。我可以加载一个字母，但是我如何使用"letters“作为id，这样我就不需要为每个字母重复相同的jquery代码。

<div id="idshow"><a id="hidelinks" href="#">Hide</a> <br /><br /></div>

<div id="letter_a"><a id="success_a" href="#">A Show</a></div>
<div id="letter_b"><a id="success_b" href="#">B Show</a></div>
<div id="letter_c"><a id="success_c" href="#">C Show</a></div>

<div id="loadpage"></div>


<script>
$("#idshow").hide();

$("#success_a").click(function () {

        $("#idshow").show();
        $("#letter").hide();


        $("#loadpage").load("letter_a.html", function(response, status, xhr) {
                if (status == "error") {var msg = "Sorry but there was an error: ";$("#error").html(msg + xhr.status + " " + xhr.statusText);}});
        });

        $('#hidelinks').click(function() {
                $('#letter_content').slideUp();
                $("#idshow").hide();
                $("#letter").show();
});

</script>

Answer 1

您可以使用以下命令：

 $('[id^="success"]').click(function () {
     // the letter is the last character of the id
     var letter = this.id.slice(-1); 
     ...
     $("#loadpage").load("letter_"+letter+".html" ...

Answer 2

这就是我要做的，使用数据属性：

<div id="letters">
    <div><a data-letter="a" href="#">A Show</a></div>
    <div><a data-letter="b" href="#">B Show</a></div>
    <div><a data-letter="c" href="#">C Show</a></div>
</div>

JS：

$('.letters').on('click','a[data-letter]',function() {
    var selectedLetter = $(this).data('letter');
    //rest of code here
});

您可以访问selectedLetter变量中的选定字母r。这也比其他一些解决方案更有效，因为它只附加一个事件处理程序，而不是为每个字母附加一个单独的事件处理程序。

Answer 3

给这些字母一个类(例如.letter)可能是一种解决方案。您可以通过隐藏.letter来隐藏所有字母，并通过专门针对其id来显示一个字母。因此，该函数应为$('.letter').click(function(){});