1

大编辑：更新了代码部分，但问题保持不变。

我可能有一个独特的 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 时，我将如何重新绑定该单击事件。（显然我将使用这个问题的第一部分也适用于 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>

请帮忙！

谢谢！

4

3 回答 3

0

构建链接如下：

<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 动作。

您必须调整脚本以准确实现您想要的。

于 2012-10-26T22:43:51.190 回答
0

我试一试，这对您的便携性有帮助吗？

$(".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');
}
于 2012-10-26T20:24:31.677 回答
0

更改您的函数以传递对您要操作的元素（或多个元素）的引用：

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，假设 idopenslide1将对应于具有 id 的元素slide1。

于 2012-10-26T20:29:52.403 回答