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

 function toggleImages(e){
  $('img').hide();
  $('img.'+e.target.id+'_img').show();
 }

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

 });

  <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>

Answer 2

首先：您需要设置一个默认选项，以使切换按预期工作。

使用CSS类将div组合成一个组（类）并将事件绑定到它，请参阅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事件Toggle中，他们中的一个人将其作为默认选择，这样Toggling这两个，总是只有一个可见。

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

Answer 3

根据周围的HTML，您可能需要修改它。但是，只要您分享了HTML，就可以这样做：

$(document).on('click', 'button', function(){
  $('img').hide();
  $("." + this.id + "_img").show();

  //Workaround for '#all'
  if( this.id === 'all' ){
    $('img').show();
  }
});

您还可以修改HTML以利用data-属性：

<div id="wrapper">
    <div id="buttoncont">
        <button data-show="dog, cat" type="button">All</button>
        <button data-show="dog" type="button">Dog</button>
        <button data-show="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（未经测试，但应该有效）：

$(document).on('click', 'button', function(){
  var arrShow = this.getAttribute('data-show').split(/\s*,\s*/);

  $('img').hide();

  for( var i = arrShow.length; i-- > 0; ){
    $('.' + arrShow[i] + '_img').show();
  }
});

Answer 4

您可以使用：

$('#buttoncont button').click(function(){
    if(this.id=='all'){
        $('img').show();
    }else{
        $('img').hide().filter('.'+ this.id +'_img').show();
    }
})

小提琴：http://jsfiddle.net/b65EL/

Answer 5

一个想法

$("#all").click(function(){
  $(".cat_img, .dog_img").show();
}
$("#dog, #cat").click(function(){
  $("img."+this.id+"_img").toggle();
}

Answer 6

删除按钮上的ID属性，除非您需要其他内容。

为按钮添加自定义属性，例如：

<button id="cat" type="button" image-clicker="cat_img">Cat</button>

然后将此jquery添加到页面中（我没有对此进行测试，因此您可能需要修复它的小问题）：

$(function(){
  $("[image-clicker]").each(function(){
    var buttonClicked = $(this);
    var targetID = buttonClicked.attr("image-clicker");
    var targetElement = $("#"+targetID);

    $(this).click(function(){
       // hide other images
       $("[image-clicker]").hide();
       targetElement.show();
    });
 };

}）;

Answer 7

我会这样做

保留你的html。

$(".toggle").click( 
    function() {
        $("."+ $(this).attr('id') + "_img").toggle() 
    }
);

$("#all").click( 
    function() { 
        $("img[class$='_img']").show() 
    }
);

这样您可以根据需要添加任意数量的图像和按钮，而无需修改您的javascript

这是jsFiddle

如何在jquery代码中停止重复？

7 个答案: