javascript - 如何停止 jquery 代码中的重复？

Question

我正在尝试制作一个图像库，但我的代码包含很多重复。你们中有人知道如何让这项工作变得更好吗？

这是代码示例

HTML

<div id="wrapper">
    <div id="buttoncont">
        <button id="all" type="button">All</button>
        <button id="dog" type="button">Dog</button>
        <button id="cat" type="button">Cat</button>
    </div>
    <img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
    <img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>

JS

 $("#cat").click(function () {
     $("img.dog_img").hide();
     $("img.cat_img").show();
 });
 $("#dog").click(function () {
     $("img.cat_img").hide();
     $("img.dog_img").show();
 });
 $("#all").click(function () {
     $(".cat_img, .dog_img").show();

 });

Answer 1

首先:您需要设置默认选择以使切换按预期工作。

使用CSS类将div分成一组(类)并将事件绑定(bind)到它，请参阅HTML:

<div id="wrapper">
    <div id="buttoncont">
        <button id="all" type="button">All</button>
        <button class=toggle id="dog" type="button">Dog</button>
        <button class=toggle id="cat" type="button">Cat</button>
    </div>
    <img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
    <img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>

在 Javascript 代码中，执行一个函数来为您执行此操作并使用 jQuery Toggle:

 function toggleImg(){
   $('img.dog_img').toggle();
   $('img.cat_img').toggle();
 }
 $(".toggle").click(function () {
   toggleImg();
 });
 $("#all").click(function () {
   $(".cat_img, .dog_img").show();
 });

但是在页面的 onLoad 事件上切换其中之一，使其成为默认选择，这样切换这两个，始终只有一个可见。

$('html').ready(function(){    
  $('img.cat_img').toggle();
});