CODEWITHSUNDEEP
jqueryjquery-selectors
teslasimus
teslasimus

Reputation: 1298

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>

Upvotes: 2

Views: 174

Answers (7)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382102

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

Upvotes: 5

Stefan
Stefan

Reputation: 14863

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/

Upvotes: 0

Brian Glaz
Brian Glaz

Reputation: 15666

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.

Upvotes: 1

DeeDub
DeeDub

Reputation: 1662

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

​

Upvotes: 0

ajtrichards
ajtrichards

Reputation: 30565

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

});

Upvotes: 0

Joel Etherton
Joel Etherton

Reputation: 37533

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

Upvotes: 0

Bastiaan ten Klooster
Bastiaan ten Klooster

Reputation: 173

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

Upvotes: 0

Related Questions