將順序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);

我的問題是可能有無限數量的幻燈片，因此是“ openslides”。 每個“ openslide”選擇器都對應於其自己的唯一幻燈片。 （例如，＃openslide2將打開＃slide2並解除綁定＃openslide2 ...依此類推）。

那么如何將它們組合成單個變量和函數呢？

另外，我還想單擊另一個事件來“重新綁定” #openslide。 目前，我可以一次完成一個任務。...

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

但是，一旦這成為一個組合函數，我假設“ openslide1”將不再是該函數的變量。 因此，當單擊#closeslide時，我將如何重新綁定該click事件。 （顯然，我將使用該問題的第一部分來應用於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類，但.targetclass存在同級關系，但可以根據需要進行更改。

編輯2：假設id openslide1將與id slide1的元素相對應，將其slide1為使用id。

Answer 3

構造鏈接如下：

<div class="section">
    <a class="edit-btn openslide" data-slide="#slide1" href="#null">edit</a>
    <a class="edit-btn openslide" data-slide="#slide2" href="#null">edit</a>
    <a class="edit-btn openslide" data-slide="#slide3" href="#null">edit</a>
    <a class="edit-btn openslide" data-slide="#slide4" 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" class="submitslide1 btn btn-primary">Submit</a> <a class="closeslide1 btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>

很難確切知道需要什么效果，但是處理程序的一般形狀如下所示：

$(".openslide, .closeslide").click(function() {
    if($("body").filter(":animated").length) { return; } //animation in progress, abort.
    var $slide = $($(this).data('slide'));
    var state = $slide.data('state') || 'closed';
    var sign = (state == 'closed') ? '+' : '-';
    $slide.animate({
        left: sign + "=250px"
    }, 400, function(){
        $slide.data('state', (sign == '+') ? 'open' : 'closed');
    });
    $('body').animate({
        marginLeft: sign + "=250px"
    }, 400);
    return false;
});

未經測試

如您所見，一個功能（當它起作用時）將同時處理slideopen和slideclose動作。

您將不得不修改腳本以精確地實現所需的功能。