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 var中选定的letetr。这也比其他一些解决方案更有效，因为它只附加一个事件处理程序，而不是每个字母都附加一个单独的事件处理程序。

Answer 3

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

Answer 4

为每个人提供一个没有样式的课程：

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

$('.letter').click(function(event) {
   // ...
});

Answer 5

添加class，添加数据attribute，从容器中选择所有子项....

~~只选择以字符串开头的所有ID！~~ 那么可以只选择id的一部分。见破坏答案....

代码：

$('[id^="success"]').each(function() {
    debugger;
    $('body').append($(this).text());
    });

小提琴示例：http://jsfiddle.net/TwDmm/2/

Answer 6

我建议将字母用作课程。

然后您可以选择

$(".letters").click(function(){
   // You then access the clicked object via $(this).

});

Answer 7

我相信这就是你要找的东西（减去警告（...）部分，这只是为了表演）：

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

$(".letterLink").click(function () {

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

var url = $(this).attr('id') + ".html";
 alert("loading " + url);   

        $("#loadpage").load(url, 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();
        });
});

Here is the fiddle

jquery：使用“letters”作为id

7 个答案: