Question

我想指导使用jQuery更改两个div的内容，一个有图像，另一个有文本，点击旋转木马中的缩略图。有没有更优雅的方式来做到这一点？

如何在IMG标签中使用REL标签来处理大图？

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

Answer 1

我相信当访问者点击某个项目时，您希望您的轮播扩展为更大的视图吗？这样的东西应该符合你的需要，可能需要一些调整：

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

使用$(this)，您可以查看单击的元素，从而制作更通用的代码。如果您需要，也可以插入属性的内容。我建议使用alt - 属性作为额外文本的图像。

图像点击时更改两个div的内容

1 个答案: