0

下に円形の div があるメイン画像があります。これらのdivの1つがクリックされたときにメイン画像を変更したいと思います。これは、私が思っていたよりも難しいことが証明されています。これが「吸血鬼を助ける」の場合は申し訳ありませんが、他に何を試せばよいかわかりません。

    <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>

Jクエリ

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

3 に答える 3

1

JSFiddle

$('.slider-circle').click(function() {
    var $newSlide = $(this).find('img').attr('src');
    $('.slider > img').attr('src', $newSlide);
})
于 2013-08-14T15:52:23.400 に答える
0

あなたはそれがどのように機能するかを理解していないようですので、私はあなたのためにそれを分解します.

  1. すべてのサークル画像にクリックイベントを添付

    $('.slider-circle').click(関数() {

    });

  2. div がクリックされると、含まれている img src 値を取得します

    $('.slider-circle').click(関数() {

    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"));
}
于 2013-08-14T16:01:55.693 に答える
0

これはあなたが望むものです：

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

ただし、これはクラスを持つ要素が1つしかないことを前提としていますslider

于 2013-08-14T15:55:55.607 に答える