Change content of two divs when image click_问答_开发者

Change content of two divs when image click

开发者 https://www.devze.com 2023-03-26 13:29 出处：网络

I would like guidance on using jQuery to change the content of two divs, one has an image and the other has text, with the click of a thumbnail in a carousel.Is there a more elegant way to do this?

相关专题：jquery

I would like guidance on using jQuery to change the content of two divs, one has an image and the other has text, with the click of a thumbnail in a carousel. Is there a more elegant way to do this?

How can I use a REL tag in the IMG tag to handle the big image?

  <html><head>
    <script type="text/javascript" src="jcarousel/js/jquery-1.4.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jMyCarousel.css" />  
    <script type="text/javascript" src="jMyCarousel.js"></script>
    <script>
    $(document).ready(function() {
    $(".jMyCarousel").jMyCarousel({ visible: '100%'  }); 

    $("li#one").click(function() {
        $("#changeText").html("<img src='img/12.jpg'>");
        $("#textBox").html("One has been clicked!");
    });
    });
    </script>
    </head><body id="#lab-project">

    <div id="changeText"></div>
    <br />
    <div id="textBox">This text will be changed to something else</div> 

     <div class="jMyCarousel">  
     <ul>  
         <li id="one"><img src="img/1.jpg" width="200" height="150"></li>  
     开发者_开发技巧    <li><a href="img/2.jpg" title=""><img src="img/2.jpg" width="200" height="150"></a></li>  
         <li><a href="img/3.jpg" title=""><img src="img/3.jpg" width="200" height="150"></a></li>  
         <li><a href="img/4.jpg" title=""><img src="img/4.jpg" width="200" height="150"></a></li>  
         <li><a href="img/11.jpg" title=""><img src="img/11.jpg" width="200" height="150"></a></li>  
         <li><a href="img/11.jpg" title="" >hello world</a></li>  
    </ul>  
    </div>
    </body></html>

I believe you want your Carousel extended with a bigger view when a visitor clicks a certain item right? Something like this should fit your need, might need some tweaking though:

$('.jMyCarousel li').click(function(){
  $('#changetext, #textBox').empty();
  $(this).children('img').appendTo('#changeText');
  $(this).children('a').text().appendTo('#textBox');
});

With the use of $(this) you can scope to the clicked element, thus making a more generic piece of code. You can also insert the content of attributes if that is what you need. I would suggest using the alt-attribute for images for the extra text.