Javascript 将顺序jQuery选择器组合到单个函数中

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

我可能有一个独特的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变量。）

编辑行
下面的原型数据可能不反映单击的链接

编辑行
下面的原型数据可能不反映单击的链接

编辑行
下面的原型数据可能不反映单击的链接

编辑行
下面的原型数据可能不反映单击的链接

请帮忙

---

谢谢

我试试看，这对你的便携性有帮助吗

$(".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');
}

---

更改函数以传递对要操纵的元素的引用：

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，假设id

openslide1

将对应于id

slide1

的元素，按如下方式构建链接：

<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>

未经测试

正如您将看到的，一个函数（当它工作时）将处理slideopen和slideclose操作

---

您必须调整脚本以精确实现您想要的内容。

我无法想象您要做什么。也许一些图片会有帮助？他目前的作品，但他不想有x功能，其中x是他的幻灯片数量。我不能添加图片，因为这是一个工作项目。本质上，当有人点击一个带有“openslide1”类的链接时，会触发主体和带有“slide1”类的幻灯片向右移动。它还解除了“openslide1”链接的绑定，这样就不会不断地将页面向右移动。我的问题是可能有几十张幻灯片和后续的“openslide”链接。我如何创建一个功能，将始终连接“openslide”链接到它的唯一幻灯片？添加了它。默认情况下，所有幻灯片（.slide1、.slide2等）都位于可见主体的左侧。对我来说不太合适。它会移动身体…但似乎不会移动滑块1，也不会解除openslide1的绑定。该死。我做了一些快速的改变。过一会儿我再看一眼，不幸的是，他们不会真的处于任何下一个兄弟姐妹的情况。请原谅我对jQuery的了解有限。我用一些HTML更新了我的原始问题，这可能有助于显示我的意思。我在幻灯片本身中使用了类，尽管它们可能应该是id。.openslide链接将对应于它的唯一幻灯片。@HarlanBowling:是的，您最好使用id。然后，您可以执行简单的字符串操作，从

openslide1

的id获取要操作的

slide1

的id。你可以对类做同样的事情，但是因为每个元素上有两个类，所以会稍微复杂一些。好的……这很好。假设我将openslide1、openslide2等类更改为ID，将slide1、slide2等类更改为ID，你能帮我修改上面的脚本吗？不幸的是，它不起作用。似乎没有移动身体或滑倒。我已将编辑链接更改为id“openslide1”，并将相应的幻灯片更改为id“slide1”…但没有骰子。对我的OP进行编辑以显示我现在的位置。希望它也能解决一些问题。

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