Question

我有一张主图像，下面是圆形div。当我点击其中一个div时，我想更改主图像，其中包含图像。事实证明这比我想象的更具挑战性。对不起，如果这是'帮助吸血鬼-y'，但我不知道还有什么可以尝试。

    <div class="span6 slider">
            <img src="img/food-and-drink/taps.jpg" alt="Photograph of beer taps">
            <div class="row-fluid">
                <div class="span12">
                    <a href="#"><div class="slider-circle"><img src="img/food-and-drink/kegs.jpg" alt="Photograph of kegs"></div></a>
                    <a href="#"><div class="slider-circle"></div></a>
                    <a href="#"><div class="slider-circle"></div></a>
                </div>
            </div>
        </div>

Jquery的

    var currentSlide = $('.slider img').attr('src');
$('.slider-circle').click(function() {
    $currentSlide = $(this).child().attr('src');
})

已解决 - 克里斯托弗马歇尔的解决方案。非常感谢你！

    $('.slider-circle').click(function(e) {
        e.preventDefault();
        var $newSlide = $(this).find('img').attr('src');
        $('.slider > img').attr('src', $newSlide);
    });

Answer 1

JSFiddle

$('.slider-circle').click(function() {
    var $newSlide = $(this).find('img').attr('src');
    $('.slider > img').attr('src', $newSlide);
})

Answer 2

这就是你想要的：

$('.slider-circle').click(function() {
    $mainSlide = $('.slider > img');//get a reference to the main slide img
    $currentSlide = $(this).find('img');//get a reference to the selected img
    $mainSlide.attr('src', $currentSlide.attr('src'));//set the main img src attribute to match the selected img src attribute
})

但是，这确实假设您只有一个类slider

的元素

Answer 3

你似乎不明白它是如何运作的，所以我打算为你分解它。

将点击事件附加到所有圈子图像

$（'。slider-circle'）。click（function（）{

}）;
单击div时，检索包含img src值

$（'。slider-circle'）。click（function（）{

var new_src = $（this）.find（'img'）。prop（“src”）;

}）;
创建一个切换主图像的功能

function switchImage（new_src）{

$（'。slider＆gt; img'）。prop（“src”，new_src）;

}
把它放在一起

代码：

$('.slider-circle').click(function() {
  new_src = $(this).find('img').prop("src");
  switchImage(new_src);
});
function switchImage(new_src) {
  $('.slider > img').prop("src", new_src);
}

缩短代码：

$('.slider-circle').click(function() {
  $('.slider > img').prop("src", $(this).find('img').prop("src"));
}

为什么这个jQuery图像切换器不工作？

3 个答案: