Jquery在不同的div上显示img，这取决于它被点击的位置

Question

为了更好地解释我需要什么，我在这里上传了一个例子。

我有3div，并点击其中任何一个将有相同的图像菜单出现在右边。我现在所拥有的是:单击第一个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，但仍然当我选择一个图像只显示在第一个div。

谁能帮我看看这个?

Answer 1

在carousel的click函数内部，您有"#tela1"硬编码。该部分需要根据所单击的div是动态的。您可能希望将单击的div存储在一个变量中，该变量将在click函数中使用。这是你们文档的一个样本。就绪函数可以像这样:

$(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中添加class="tela"。

<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中更新图像轮询器选择器。