ansaurus

Question

jQuery - Show id, based on selected items class?

Answer 1

+5 A:

Based on your markup, you can do something like this:

$("[id^=content]").hide();
$("#thumbnails > div").click(function() {
    var id = $(this).attr('class').replace('thumb-content','');
    $("#foo").html($("#content-"+id).html());
});

You can see a demo working here

This uses the ^= starts-with selector to hide the initial divs, and on click, uses .html() to copy the content like you want.

If you have a lot of these, it's better to use .delegate(), which attaches a single event handler instead of n event handlers to every click-able <div>. It would look like this:

$("[id^=content]").hide();
$("#thumbnails").delegate("div", "click", function() {
    var id = $(this).attr('class').replace('thumb-content','');
    $("#foo").html($("#content-"+id).html());
});

Demo updated for that here

Nick Craver 2010-05-27 21:05:47

Answer 2

+2 A:

I just used the index from .each() to construct the id name:

$("div[id^='content-']").hide();

$('#thumbnails').find('div').each(function(i,obj){
    $(obj).click(function(e){
      $("#foo").html($("#content-"+(i+1)).html());        
    });
});

...and you can see also a working demo here (Take that Nick!)

mVChr 2010-05-27 21:06:21

This depends a few things, for example the navigation divs being the *only* thing in the thumbnails div and the order being correct, if the class turns to say 01 or 02 if they get larger, they don't render in order...anything and this breaks, best to use the classes and IDs provided like the question asks for...

Nick Craver 2010-05-27 21:13:47

Touche sir, touche. Yours is a more solid interpretation of the spec. +

mVChr 2010-05-27 21:16:03

+1 - All of what I said here may be things that are assured to be constant by the CMS and may *not* be an issue...from the example you can't tell, only the OP knows...but this is valid for the example :)

Nick Craver 2010-05-27 21:18:05

Answer 3

A:

Load Content by means of class and id

    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

    <script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
    <script type="text/javascript">
      google.load("jquery", "1.4.1");

      google.setOnLoadCallback(function() {

            // THIS IS WHAT YOU NEED (CALL IT ON LOAD)
            $(function() {
                $('.thumbs').click(function() {
                    var id = this.className.split(' ')[1];
                    $('#foo').html($('#' + id).html());
                });
            });

      });
    </script>

</head>

<body>

    <div id="foo">

        00 00 00

    </div>


    <div id="thumbnails">
        <div class="thumbs content-1">Load 01</div>
        <div class="thumbs content-2">Load 02</div>
        <div class="thumbs content-3">Load 03</div>
    </div>


    <div id="content-1" style="display:none">
        01 01 01
    </div>

    <div id="content-2" style="display:none">
        02 02 02
    </div>

    <div id="content-3" style="display:none">
        03 03 03
    </div>

</body>

If I've read your post right, by clicking on the thumbs you want to load the content to #foo! If this is correct, use the example posted:

This will run the code every time you click on an element with a class of "thumbs"

$('.thumbs').click(function() {
This will split the classes of the clicked element and will grab to a variable the second one

var id = this.className.split(' ')[1];
This will search for an element with an id equal to the grabbed class and retrieve it's content, sending it to #foo.

$('#foo').html($('#' + id).html());

Note that the trick is to have the clicked element with a class name that's correspondent to and id element that contains the required content.

Hope this helps U!

Zuul 2010-05-27 23:49:43

Great working example, thanks, but Nick beat you to chosen answer :)

Jon Hadley 2010-06-01 11:22:10

I'm a fan of Nick Craver's work for a while now... It's fair :)(btw: I've vote is answer as well...)

Zuul 2010-06-01 12:56:55

ansaurus

tags:

views:

answers:

jQuery - Show id, based on selected items class?

related questions