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 个按钮。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 图像”解决方案）

于 2012-10-07T10:42:01.550 回答