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

我尝试为三个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'));
    });
});

为了使其正常工作，您需要将class =“tela”添加到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中的图像轮播选择器。

jquery在不同的div上显示图像，具体取决于点击的位置

1 个答案: