jquery displayクリックした場所によって異なるdivにimgを表示

Question

私が必要としていることをよりよく説明するために、hereの例をアップロードしました。

私は3つのdivを持ち、どちらか一方をクリックすると同じ画像メニューが右側に表示されます。私が今いるのは、最初のdivをクリックしてからメニューを開き、画像を選択して.prepend()をクリックして、その画像をクリックしたdivに表示します。しかし、2番目または3番目のdivをクリックして色を選択したときに画像メニューが表示される場合、これは最初のdivに表示されます。

<div id="tela1"><img src="img/blank.jpg" /></div> 
<div id="title_tela1"></div> 
<div id="tela2"><img src="img/blank.jpg" /></div> 
<div id="title_tela2"></div> 

<div id="tela1_options"> 
    <div class="image_carousel1> 
     Content goes here... 
    </div> 
</div> 
<div id="tela2_options"> 
    <div class="image_carousel2> 
     Content goes here... 
    </div> 
</div> 

そして、JS：

単純化されたHTMLは次のようなものである

$('.carousel_image1 img').click(function() { 
    var imageName = $(this).attr('alt'); 
    var chopped = imageName.split('.'); 
    $('#title_tela1').empty(); 
    $('#title_tela1') 
     .prepend(chopped[0]); 
    $img = $(this); 
    $('#tela1 img').attr('src', $img.attr('src')); 
}) 

私は3つのdiv要素のそれぞれについて、セレクタ('#tela1_options .carousel_image1 img')を使用してみましたが、それでも私は、画像を選択した場合最初のdivにのみ表示されます。

誰かが見て、これを理解するのに役立つことができますか？

Answer 1

カルーセルの機能をクリックすると、「＃tela1」がハードコードされます。その部分は、divがクリックされたことに基づいて動的である必要があります。おそらく、クリックされたdivをclick関数の内部で使用される変数に格納したいと思うでしょう。ここにあなたのdocument.ready機能がどのように見えることができるもののサンプルです：仕事にそのためには

$(function(){ 
    var clickedDiv = null; 

    $(".tela").click(function(){ 
     clickedDiv = $(this); 
    }); 

    $('.carousel_image1 img').click(function() { 
     var $img = $(this), 
      imageName = $img.attr('alt'), 
      chopped = imageName.split('.'); 

     clickedDiv.next().text(chopped[0]); 
     clickedDiv.find('img').attr('src', $img.attr('src')); 
    }); 
}); 

、あなたはdiv要素にクラス=「テラ」を追加する必要があります。私は表示するために最初のカルーセルに画像を設定しhttp://jsfiddle.net/jY4qa/2/ ：ここ

<div id="tela1" class="tela"><img src="img/blank.jpg" /></div> 
<div id="title_tela1"></div> 
<div id="tela2" class="tela"><img src="img/blank.jpg" /></div> 
<div id="title_tela2"></div> 

はjsFiddleの実施例です。しかし、空白のdivの1つをクリックしてイメージをクリックすると、正しく設定されます。 JSの画像カルーセルセレクタも私の例で更新しなければならなかった。