當圖片點擊時更改兩個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的內容

回答

相關問題