Javascript JS或Jquery更改类名的通用方法

我得到以下情况：

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

默认值：
1.显示图像A和隐藏图像B。（添加类名“隐藏”）
2.添加到激活按钮A的样式（添加类名“激活”）

功能：
1.单击按钮A时显示图像A并隐藏图像B。反之亦然。
2.样式将添加到激活的按钮。反之亦然

代码：

按钮A
按钮B

我希望在不进一步更改JavaScript的情况下，将该函数应用于上述情况中的多个。是否有任何方法以通用方式呈现JS

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

按钮A
按钮B
$（“.button”）。单击（函数（）{
$（'.image'）.addClass（'hidden'）；
$（'#'+$（this.attr（'attr-image'））.removeClass（'hidden'）；
$（'.button'）.removeClass（'active'）；
$（this.addClass（'active'）；
})

它所做的是用每个按钮存储相应图像的id

单击按钮时，会将

隐藏的
添加到所有图像中，然后将其从与按钮对应的图像中删除

按钮的方法相同：首先删除所有处于活动状态的按钮，然后添加到单击的按钮中
 如果要切换图像，不需要2个div和2个按钮。您可以使用一个按钮在一个图像中切换图像
src
。比如：

HTML:

请参阅（还包含一个使用css类进行切换的替代方案，以及一个“2按钮/1图像”解决方案）
谢谢Rajat。但我仍然遇到以下问题：1。无法单击2 div。2。即使链接到jquery.JS的html也无法运行JS。请帮助。2 div无法单击。所以我在div中添加了。但是JS似乎无法运行，即使html链接到jquery.JS。请给出建议。我知道怎么了，我得到了一个错误的按钮ID（应该是“按钮”，但不是“按钮”）。该函数现在运行良好。非常感谢你的帮助Rajat谢谢你Kooilnc。事实上，我真的需要2个按钮供用户识别他们的选择。但你的建议只有一个图像说明是相当鼓舞人心的。这项技术在未来的任何一天都会对我有用。很高兴我能启发你。只是为了好玩：有关“2按钮/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');
})

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

​$('#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)});
});