Question

我得到以下案例：

元素：图像A，图像B，按钮A，按钮B

默认：
1.显示图像A并隐藏图像B.（添加类名＆＃34;隐藏＆＃34;）
2.样式添加到激活的按钮A中。（添加类名＆＃34;激活＆＃34;）

功能：
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？

Answer 1

<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类，然后添加到单击的按钮中。

Answer 2

如果要切换图像，则不需要2个div和2个按钮。您可以使用一个按钮在一个图像中切换图像src。类似的东西：

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图像'解决方案）

JS或Jquery通用方式更改类名

2 个答案: