jquery根據點擊的位置在不同div上顯示img

Question

爲了更好地解釋我需要的內容，我上傳了一個示例here。

我有3個div，點擊其中任何一個將會在右側出現相同的圖像菜單。我現在擁有的是：點擊第一個div，然後進入菜單，選擇一個圖像並使用.prepend()在點擊的div上顯示該圖像。但是，如果我在點擊第二個或第三個div並選擇一種顏色時出現圖像菜單，它仍會顯示在第一個div上。

簡化HTML是這樣的：

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

$('.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')); 
}) 

我使用選擇('#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的。

<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工作示例：http://jsfiddle.net/jY4qa/2/ 我只設置了圖像在第一輪播展現出來。但是，如果您點擊其中一個空白div，然後點擊一個圖像，它就會正確設置它。我也不得不更新JS中的圖像輪播選擇器。