jquery: use “letters” as an id

问题:

I'm building menu that will show a list of letters and than load the proper page according to what user has selected. I'm able to load one letter, but how could i use "letters" as an id so i don't need to duplicate the same jquery code for each letter.

<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>

回答1:

You may use this :

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

回答2:

This is what I would do, using data attributes:

<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
});

You have access to the selected letetr in the selectedLetter var. This is also more efficient than some of the other solutions, because it only attaches one event handler, instead of an individual event handler for every single letter.

回答3:

Giving the the letters a class (for instance .letter) might be a solution. You could hide all letters by hiding .letter and show one by specifically targetting its id. The function should therefore be $('.letter').click(function(){});

回答4:

Give each one a class that has no styling:

<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) {
   // ...
});

回答5:

I would suggest using letters as a class.

You can then do a select on

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

});

回答6:

I believe this is what you are looking for (minus the alert(...) part, that is just for show):

$("#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

​

回答7:

Add a class, add a data attribute,select all children from the container....

Just selecting all ids which start with a string is not possible! Well it is possible to just select a part of the id. See dystroy answer....

Code:

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

Fiddle sample: http://jsfiddle.net/TwDmm/2/