jQuery - Show id, based on selected items class?_问答_开发者

I have a layout roughly as follows:

<div id="foo">

    <!-- a bunch of content -->

</div>


<div id="thumbnails">
    <div class="thumb-co开发者_开发百科ntent1"></div>
    <div class="thumb-content2"></div>
    <div class="thumb-content3"></div>
</div>


<div id="content-1">
    <!-- some text and pictures, including large-pic1 -->
</div>

<div id="content-2">
    <!-- some text and pictures, including large-pic2 -->
</div>

<div id="content-3">
    <!-- some text and pictures, including large-pic3 -->
</div>

etc ....

On page load I want to show 'foo' and 'thumbnails' and hide the three content divs.

As the user clicks each thumbnail, I want to hide foo, and replace it with the matching 'content-x'.

I can get my head round jQuery show, hide and replace (although, bonus points if you want to include that in your example!). But how would I extract and construct the appropriate content id, from the thumbnail class, then pass it to the show hide code?

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

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

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"></script>
    <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!