简化两个 jquery 代码

Question

我有两个代码部分，我想让它更简单一些。都是 JQuery 代码，我想在代码中减少它。应该有其他方法可以做到这一点...

第一个：

  $(document).ready(function(){$(".floorplan0").click(function(){ $(".layout0").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan1").click(function(){ $(".layout1").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan2").click(function(){ $(".layout2").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan3").click(function(){ $(".layout3").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan4").click(function(){ $(".layout4").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan5").click(function(){ $(".layout5").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan6").click(function(){ $(".layout6").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan7").click(function(){ $(".layout7").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan8").click(function(){ $(".layout8").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan9").click(function(){ $(".layout9").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan10").click(function(){$(".layout10").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan11").click(function(){$(".layout11").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan12").click(function(){$(".layout12").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan13").click(function(){$(".layout13").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan14").click(function(){$(".layout14").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan15").click(function(){$(".layout15").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan16").click(function(){$(".layout16").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan17").click(function(){$(".layout17").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan18").click(function(){$(".layout18").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan19").click(function(){$(".layout19").slideToggle(0); }); });
  $(document).ready(function(){$(".floorplan20").click(function(){$(".layout20").slideToggle(0); }); });

第二个：

  $(document).ready(function(){
   $("#pic0").show();
   $("#pic1").hide();
   $("#pic2").hide();
   $("#pic3").hide();
   $("#pic4").hide();
   $("#pic5").hide();
   $("#pic6").hide();
   $("#pic7").hide();
   $("#pic8").hide();
   $("#pic9").hide();
   $("#pic10").hide();
   $("#pic11").hide();
   $("#pic12").hide();
   $("#pic13").hide();
   $("#pic14").hide();
   $("#pic15").hide();
   $("#pic16").hide();
   $("#pic17").hide();
   $("#pic18").hide();
   $("#pic19").hide();
   $("#pic20").hide();
   $("#pic21").hide();
   $("#pic22").hide();
   $("#pic23").hide();
   $("#pic24").hide();
   $("#pic25").hide();

   $("#show1").click(function(){
    $("#pic0").hide();
    $("#pic1").show();
    $("#pic2").hide();
    $("#pic3").hide();
    $("#pic4").hide();
    $("#pic5").hide();
    $("#pic6").hide();
    $("#pic7").hide();
    $("#pic8").hide();
    $("#pic9").hide();
    $("#pic10").hide();
    $("#pic11").hide();
    $("#pic12").hide();
    $("#pic13").hide();
    $("#pic14").hide();
    $("#pic15").hide();
    $("#pic16").hide();
    $("#pic17").hide();
    $("#pic18").hide();
    $("#pic19").hide();
    $("#pic20").hide();
    $("#pic21").hide();
    $("#pic22").hide();
    $("#pic23").hide();
    $("#pic24").hide();
    $("#pic25").hide();
   });

   $("#show2").click(function(){
    $("#pic0").hide();
    $("#pic1").hide();
    $("#pic2").show();
    $("#pic3").hide();
    $("#pic4").hide();
    $("#pic5").hide();
    $("#pic6").hide();
    $("#pic7").hide();
    $("#pic8").hide();
    $("#pic9").hide();
    $("#pic10").hide();
    $("#pic11").hide();
    $("#pic12").hide();
    $("#pic13").hide();
    $("#pic14").hide();
    $("#pic15").hide();
    $("#pic16").hide();
    $("#pic17").hide();
    $("#pic18").hide();
    $("#pic19").hide();
    $("#pic20").hide();
    $("#pic21").hide();
    $("#pic22").hide();
    $("#pic23").hide();
    $("#pic24").hide();
    $("#pic25").hide();
   });
   ... And so on until ...
   $("#show25").click(function(){
    $("#pic0").hide();
    $("#pic1").hide();
    $("#pic2").hide();
    $("#pic3").hide();
    $("#pic4").hide();
    $("#pic5").hide();
    $("#pic6").hide();
    $("#pic7").hide();
    $("#pic8").hide();
    $("#pic9").hide();
    $("#pic10").hide();
    $("#pic11").hide();
    $("#pic12").hide();
    $("#pic13").hide();
    $("#pic14").hide();
    $("#pic15").hide();
    $("#pic16").hide();
    $("#pic17").hide();
    $("#pic18").hide();
    $("#pic19").hide();
    $("#pic20").hide();
    $("#pic21").hide();
    $("#pic22").hide();
    $("#pic23").hide();
    $("#pic24").hide();
    $("#pic25").show();
   });
  });

感谢您的帮助！

Answer 1

第一个：

$(document).ready(function(){
     for (var i = 0; i <= 20; i++)
     {
         $(".floorplan"+i).click(function(){ $(".layout"+i).slideToggle(0); });
     }
 });

第二个创建函数：

function showHide(show);
{
  for (var i = 0; i <= 25; i++)
  {
      if (i == show)
      {
          $("#pic"+i).show();
      }
      else
      {
          $("#pic"+i).hide(); 
      }
  }
}

第二个可以附加到点击功能。我们甚至可以优化它：

$(document).ready(function(){
   showHide(0); //start with showing the first
   for (var i = 0; i <= 25; i++) //attach all click handlers
   {
      $("#show"+i).click(function(){
         showHide(i); //invoke the showHide function when clicked referencing the correct index.
      }
   }
});

我个人会编写不同的 show/hide 函数，但根据您发布的代码，我会以这种方式优化它。 Casimir et Hippolyte 的评论中提到了它。使用通用 class 名称并在某处存储 index。

Answer 2

正如卡西米尔所说，使用一个普通的class。这里我还使用了一个数据属性：

HTML

<div class="floorplan" data-id="0">0</div>
<div class="floorplan" data-id="1">1</div>
<div class="floorplan" data-id="2">2</div>
<div class="floorplan" data-id="3">3</div>

JS

$(".floorplan").click(function () {
    var id = $(this).data('id');
    $('.layout' + id).slideToggle(0);
});

对第二种情况使用类似的技术，例如：

$(".show").click(function () {
  var id = $(this).data('id');
  $('.pic').hide();
  $('.pic[data-id="' + id + '"]').show();
});

DEMO

简化两个 jquery 代码

Simplify two jquery codes

javascript

jquery

simplify