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

我想要使用jQuery来更改两个div的内容，一个有图像，另一个有文本，点击旋转木马中的缩略图。有没有更优雅的方式来做到这一点？当图片点击时更改两个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>

来源

2011-08-08 sandraqu

这是有点不清楚你在问什么。你是否试图根据点击的图像循环div中的文本？ – Kyle

我相信你希望你的轮播扩展有更大的视图，当访问者点击某个项目是正确的？这样的事情应该满足您的需求，可能需要一些调整，但：

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

随着使用$(this)可以范围所点击的元素，从而使一个更通用的一段代码。如果这是你需要的，你也可以插入属性的内容。我建议使用alt-属性来显示额外文本的图像。

来源

2011-08-08 19:32:45

您可能还想首先清除div，因为我认为您不希望为每个图片添加单击链接的附加内容。 $（'＃changeText'）。html（''） – Brandon

你说得对，现在插入一行代码。 :) –

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

回答

相关问题