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");
});

如果您在这些示例中使用事件委托，则不必将代码放入＆＃34; ready＆＃34;处理程序。

如何用变量简化jquery代码？

2 个答案: