简化两个 jquery 代码

Simplify two jquery codes

本文关键字：两个 jquery 代码      更新时间：2023-09-26

我有拖曳代码部分，我想让它更简单一点。他们都是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();
   });
  });

谢谢你的帮助！

第一个： 

$(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.
      }
   }
});

就个人而言，我会编写不同的显示/隐藏功能，但根据您发布的代码，我会以这种方式对其进行优化。在卡西米尔和伊波吕特的评论中提到了这一点。使用泛型类名并将索引存储在某处。

正如卡西米尔所说，使用一个公共类。在这里，我还使用了一个数据属性：

.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();
});

演示

相关文章：