2011-08-08 6 views
0

jQueryを使用して2つのdivの内容を変更するガイダンスがあります。画像には画像があり、その他にはカルーセルのサムネイルのクリックがあります。これを行うよりエレガントな方法はありますか?画像をクリックしたときに2つの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> 
+0

あなたが求めていることは少し不明です。どの画像がクリックされたかに基づいてdiv内のテキストを循環させようとしていますか? – Kyle

答えて

0

私はあなたが訪問者が特定のアイテムの右をクリックしたときに、あなたのカルーセルは、大きな視野で拡張したいと考えていますか?このような何かが、あなたのニーズに合わせなければならないもののいくつかの調整が必要になる場合があります。

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

をクリックした要素の範囲することができます$(this)を使用すると、このようにコードのより一般的な作品を作ります。それが必要な場合は、属性の内容を挿入することもできます。余分なテキストの画像にはalt属性を使用することをおすすめします。

+1

あなたがリンクをクリックしたそれぞれの画像を追加し続けたくないと思うので、最初にdivをクリアしたいかもしれません。 $( '#changeText')。html( '') – Brandon

+0

あなたはそうです、それのためのコード行を挿入しました。 :) –

関連する問題