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

Question

我有一个主图像，下面有圆形 div。单击其中一个 div 时，我想更改主图像，其中包含图像。事实证明，这比我想象的更具挑战性。抱歉，如果这是“帮助吸血鬼”，但我不知道还能尝试什么。

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

已解决 - 使用 Christopher Marshall 的解决方案。非常感谢你！

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

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

1. 将点击事件附加到所有圆形图像

   $('.slider-circle').click(function() {

   });

2. 单击 div 时，检索包含的 img src 值

   $('.slider-circle').click(function() {

   var new_src = $(this).find('img').prop("src");

   });

3. 创建一个函数来切换主图像

   函数 switchImage(new_src) {

   $('.slider > img').prop("src", new_src);

   }

4. 把它放在一起

代码：

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