0

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

我有 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 中的每一个使用选择器，但是当我选择图像时，仍然只显示在第一个 div 上。

有人可以看看并帮我解决这个问题吗？

4

1 回答 1

0

在轮播的单击功能内部，您已硬编码“#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 中的图像轮播选择器。

于 2011-10-19T18:29:00.237 回答