如何使用变量简化 jquery 代码？

Question

我已经完成了这个 jQuery 代码来切换带有图像预览的浮动部分。图层始终相同，只有图像发生变化。我设法简化了 css 中的代码，为元素提供类。一切正常。但是我发现优化 jQuery 代码非常困难。我对 jQuery 和 Javascript 还很陌生，所以我不太确定该怎么做。代码工作正常，但它非常庞大，我想简化它。我相信我必须使用变量。但是怎么做？任何帮助将不胜感激:)

这是我的 jQuery 代码：

//first layer

$(document).ready(function() {
$('.toggleLayer').click(function(){
$('#FloatingLayer').fadeIn('fast');
});
});

$(document).ready(function() {
$('#FloatingLayer').click(function(){
$(this).fadeOut('fast');
});
});


//second layer

$(document).ready(function() {
$('.toggleLayer2').click(function(){
$('#FloatingLayer2').fadeIn('fast');
});
});

$(document).ready(function() {
$('#FloatingLayer2').click(function(){
$(this).fadeOut('fast');
});
});



// third layer

$(document).ready(function() {
$('.toggleLayer3').click(function(){
$('#FloatingLayer3').fadeIn('fast');
});
});

$(document).ready(function() {
$('#FloatingLayer3').click(function(){
$(this).fadeOut('fast');
});
});

这是我的html：

<div class="fourcol toggleLayer">   
     <img src="img1" class="center" width="100%">
  </div>

  <div class="fourcol toggleLayer2">   
     <img src="img2.jpg" class="center" width="100%">
  </div>

  <div class="fourcol toggleLayer3">   
     <img src="img3" class="center" width="100%" >
  </div>

浮动部分：

<section class="Floating" id="FloatingLayer">
     <img src="img1.jpg" class="floatimg"/>
   </section>

   <section class="Floating" id="FloatingLayer2">
     <img src="img2.jpg" class="floatimg"/>
   </section>

  <section class="Floating" id="FloatingLayer3">
     <img src="img3.jpg" class="floatimg"/>
   </section>

Answer 1

完全不更改您的标记...

var $body = $(document.body);

$body.on('click', '[class~=toggleLayer]', function () {
    var layerNum = this.className.match(/toggleLayer(\d+)/)[1];

    $('#FloatingLayer' + layerNum).fadeIn('fast');
});

$body.on('click', '.Floating', function () {
    $(this).fadeOut('fast');
});

但是，这里的行为并不明确，最好修改您的标记并使用 Pointy 建议的自定义 data- 属性。

Answer 2

利用您可以向标记添加信息来指导 JavaScript 代码提供的行为这一事实。假设您的切换控件是按钮：

<button class=toggle-layer data-target=FloatingLayer1>Layer 1</button>
<button class=toggle-layer data-target=FloatingLayer2>Layer 2</button>
<button class=toggle-layer data-target=FloatingLayer3>Layer 3</button>

编辑 — 或使用您的实际标记：

  <div class="fourcol toggleLayer" data-target=FloatingLayer1>   
     <img src="img1" class="center" width="100%">
  </div>

  <div class="fourcol toggleLayer" data-target=FloatingLayer2>   
     <img src="img2.jpg" class="center" width="100%">
  </div>

  <div class="fourcol toggleLayer" data-target=FloatingLayer3>   
     <img src="img3" class="center" width="100%" >
  </div>

您现在可以为所有这些编写一个简单的处理程序：

$("body").on("click", ".toggleLayer", function() {
  var targetId = $(this).data("target");

  $("#" + targetId).fadeIn("fast");
});

同样，一个处理程序可以完成关闭所有层的工作：

$("body").on("click", ".Floating", function() {
    $(this).fadeOut("fast");
});

如果您在这些示例中使用事件委托，则不必将代码放入“就绪”处理程序中。