0

次のような場合があります。

要素：画像A、画像B、ボタンA、ボタンB

デフォルト：
1。画像Aを表示し、画像Bを非表示にします（クラス名「非表示」を追加）
2。アクティブ化されたボタンAにスタイルを追加（クラス名「アクティブ」を追加）

機能：
1。ボタンAをクリックすると、画像Aを表示し、画像Bを非表示にします。その逆も同様です。
2.アクティブ化されたボタンにスタイルが追加されます。およびその逆。

コード：

<img class="image" src="ImageA.jpg" />
<img class="image hidden" src="ImageB.jpg" />
<div class="Button active">Button A</div>
<div class="Button">Button B</div>

JavaScriptをさらに変更せずに、上記の複数のケースに関数を適用したいと思います。JSを一般的な方法で提示する方法はありますか？

4

2 に答える 2

2 
<img id="imageA" class="image" src="ImageA.jpg" />
<img id="imageB" class="image hidden" src="ImageB.jpg" />
<button attr-image="imageA" class="Button active">Button A</button>
<button attr-image="imageB" class="Button">Button B</button>

$(".button").click(function(){
    $('.image').addClass('hidden');
    $('#'+$(this).attr('attr-image')).removeClass('hidden');
    $('.button').removeClass('active');
    $(this).addClass('active');
})

各ボタンで、対応する画像のIDを保存します。

ボタンをクリックすると、hiddenすべての画像に追加され、ボタンに対応する画像から削除されます。

ボタンの場合と同じように、最初にすべてのボタンactiveクラスを削除してから、クリックしたボタンに追加します。

于 2012-10-07T08:16:02.690 に答える
0

画像を切り替えたい場合は、2つのdivと2つのボタンは必要ありません。src1つのボタンを使用して、1つの画像内で画像を切り替えることができます。何かのようなもの：

HTML：

<img id="switchme" data-checked="0" class="image" src="imageA.png" />
<div id="switch" class="Button">Button A</div>

スクリプト（JQuery）：

​$('#switch').on('click',
 function​​​​​​​​​​​​​​​​​​​​​​(){
  var img = $('#switchme') 
     ,ischecked = Boolean(+img.attr('data-checked'))
     ,src = ischecked
            ? 'imageA.png'
            : 'imageB.png'
  ;
  img.attr({'src':src, 'data-checked': +(!ischecked)});
});

jsfiddleを参照してください（切り替えにcssクラスを使用する代替手段、および「2ボタン/ 1イメージ」-ソリューションも含まれています）

于 2012-10-07T10:42:01.550 に答える