3

ここで皆さんの助けが必要です。だから、これが私の条件です。画像をトリガーするボタンが 4 つあります。ボタンをクリックすると、それらがアクティブになります (これで問題ありませんが、より良い方法があれば教えてください)。

シナリオ:
ボタン 2 をクリックすると、"image2" が表示されます (class="active" を持っています)。
次に、ボタン 3 をクリックすると、「image2」フェードアウト (アクティブなクラスを削除) し、アクティブなクラスを「image3」に追加します。

これが私の4つのボタンだとしましょう：

<div id="button">
  <div class="trigger button-1" data-target="0"></div>
  <div class="trigger button-2" data-target="1"></div>
  <div class="trigger button-3" data-target="2"></div>
  <div class="trigger button-4" data-target="3"></div>
</div>

そして、次のようにラップされた画像用の別のセクションがあります。

<div id="images-container">
  <img src="image-1" class="image1">
  <img src="image-2" class="image2">
  <img src="image-3" class="image3">
  <img src="image-4" class="image4">
</div>

データ要素を使用してjQueryで画像を取得できる方法があると思っていましたか?

私の現在のjQuery：

var img = $('#images-container img'),
    trigger = $('.trigger');

// click this, make active, other? no
trigger.on('click', function(){
    $(this).addClass('active');
    $(this).siblings().removeClass('active');

    // image that have the selected ID, active.
    // other images must remove active classes
    var a = $(this).data('target');
    $('#image-container').find('img').eq(a).addClass('active');

            // and help me from here guys!

これは簡単かもしれませんが、私は jQuery のプロではありません。
すべてのソリューションは高く評価され、実際のソリューションには+1されます

4

2 に答える 2

2

それぞれのイメージクラスに関連するhtmlにデータ属性を追加します...そしてクラスを追加します...

これを試して

HTML

<div class="trigger button-1" data-target="0" data-imageclass="image1"></div>
<div class="trigger button-2" data-target="1"  data-imageclass="image2"></div>

Jクエリ

 var img = $('#images-container img'),
 trigger = $('.trigger');

 // click this, make active, other? no
trigger.on('click', function(){
  $(this).addClass('active');
  $(this).siblings().removeClass('active');

  $('#images-container img').removeClass('active');
  $('.'+$(this).data('imageclass')).addClass('active');
});

ここでフィドル

なぜdata-targetそこにあるのかわかりませんが、コードでそれを使用していない場合は、新しいデータ属性を作成する代わりにそれを使用できると思います..

$('.'+$(this).data('target')).addClass('active');
于 2013-05-02T13:36:41.680 に答える
1

あなたの単純なケースでは、タグ位置インデックスを使用するだけで十分だと思います。通常、トリガー ボタンとターゲット イメージが同じ数である場合、同じ位置インデックスを共有するため、これは機能するはずです。

これをチェックしてください：

var img = $('#images-container').find('img'),
    trigger = $('.trigger');

$('#button').on('click', '.trigger', function(e) {
    var self = $(this), // this trigger tag
        selfIndex = self.index(); // position of this trigger tag

    img.removeClass('active'); // remove class active from all img(s)
    img.eq(selfIndex).addClass('active'); // add class active just on this img

    trigger.removeClass('active'); //r emove class active from all trigger(s)
    self.addClass('active'); // add class active just on this trigger

    e.preventDefault();

});

ただし、データ属性を使用する場合は、次のようにします。ボタンのデータ属性に次のように値を追加します。

<div id="button">
  <div class="trigger button-1" data-target="image1"></div>
  <div class="trigger button-2" data-target="image2"></div>
  <div class="trigger button-3" data-target="image3"></div>
  <div class="trigger button-4" data-target="image4"></div>
</div>

次に、JS/jQuery で次のようにします。

var img = $('#images-container').find('img'),
    trigger = $('.trigger');

$('#button').on('click', '.trigger', function(e) {
    var self = $(this);

    img.removeClass('active'); // remove class active from all img(s)
    img.filter('.' + self.data('target')).addClass('active'); // add class active just on this img

    trigger.removeClass('active'); //r emove class active from all trigger(s)
    self.addClass('active'); // add class active just on this trigger

    e.preventDefault();

});
于 2013-05-02T14:05:26.920 に答える