将顺序jQuery选择器组合成单个函数

Question

大编辑:更新了代码部分，但问题仍然是一样的.

我可能有一个独特的jQuery问题，我需要一些帮助。

我有一个功能(工作得很好)，看起来像这样.

var openslide1 = function() { 
      $("#slide1").animate({
        left: "+=250px",
      }, 400, function() {
        // Animation complete.
      });
      $(this).unbind('click', openslide1); \\ to prevent from pushing slide over too many times
};

$("#openslide1").click(openslide1);

我的问题是，有可能有无限的幻灯片，因此“露台”。每个"openslide“选择器都与其独特的幻灯片相对应。(例如，#openslide2 2将打开#幻灯片2并解除对#openslide2...so的绑定等等)。

那么，我如何将它们合并成一个变量和函数呢？

另外，我还想在另一个事件的点击上“重新绑定”#openslide。目前，我可以一次做一次，通过这个.

$("#closeslide1").click(function() {
    $("#slide1").animate({
        left: "-=250px",
      }, 500, function() {
        // Animation complete.
      }); 
    $('#openslide1').click(openslide1); \\ rebinds openslide1
});

但一旦这成为一个组合函数，我假设"openslide1“将不再是该函数的变量。那么，当单击#closeslide时，我将如何重新绑定单击事件。(很明显，我将使用这个问题的第一部分来应用于闭合变量。)

<div class="section">
<a class="edit-btn" id="openslide1" href="#null">edit</a>
<a class="edit-btn" id="openslide2" href="#null">edit</a>
<a class="edit-btn" id="openslide3" href="#null">edit</a>
<a class="edit-btn" id="openslide4" href="#null">edit</a>
</div>
<div class="slide" id="slide1">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide1" class="btn btn-primary">Submit</a> <a id="closeslide1" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide2">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide2" class="btn btn-primary">Submit</a> <a id="closeslide2" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide3">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide3" class="btn btn-primary">Submit</a> <a id="closeslide3" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide4">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide4" class="btn btn-primary">Submit</a> <a id="closeslide4" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>

请帮帮忙！

谢谢!

Answer 1

我试试看，这是否有助于你的便携性？

$(".openslide1").click(function() {
      openSlide(".slide1", "body", 400, ".openslide1");
});

function openSlide(target, bodyObj, speed, original) {
      $(target).animate({
        left: "+=250px",
      }, speed, function() {
        // Animation complete.
      });
      $(bodyObj).animate({
        marginLeft: "+=250px",
      }, speed, function() {
        // Animation complete.
      });
      $(original).unbind('click');
}

Answer 2

更改函数以传递对要操作的元素(或元素)的引用：

var openslide = function(elem) { 
  var id = elem.attr("id");
  $("#" + id.substring(5)).animate({
    left: "+=250px",
  }, 400, function() {
    // Animation complete.
  });
  $('body').animate({
    marginLeft: "+=250px",
  }, 400, function() {
    // Animation complete.
  });
  elem.unbind('click', openslide);
};

$(".edit-btn").click(function() {openslide($(this))});

然后，您可以对所有元素使用单个函数，如果它们有一个公共类，则可以同时绑定它们(在本例中，我称它们为.openslide)。

编辑:再看看你最初的问题，我注意到刚开始动画的元素不是同一个元素。但是，如果它与您单击的元素(例如，它是原始元素的子元素，或者是下一个同级元素或其他东西)之间有一个很容易定义的关系，那么您可以很容易地找到合适的选择器来选择它。在上面的示例中，我假设目标元素具有一个类.targetclass，但将其更改为合适的关系。

编辑2:将其更改为使用id's，前提是id openslide1将对应于id slide1的元素。