jquery - 如何缩写jquery事件？

Question

我有一个基于 div 的 jquery 操作（我选择 div 并应用操作，但我有 90 个 div）在其 ID 如何缩写此语句：这是代码

if ($('#justgarph > p:contains("draggable1")').length > 0) {
    $(".product").animate({
        "top": "0",
        "left": "0"
    }, 500).delay(100);

    $("#draggable1").animate({
        "top": "-300px",
        "left": "200px"
    }, 500);

    setTimeout(function () {
        $("#draggable1").animate({
            "top": "-106px",
            "left": "470px"
        }, 1000);
        $("#draggable1").addClass("activeproduct")
    }, 800);
}

if ($('#justgarph > p:contains("draggable2")').length > 0) {
    $(".product").animate({
        "top": "0",
        "left": "0"
    }, 500).delay(100);

    $("#draggable2").animate({
        "top": "-300px",
        "left": "100px"
    }, 500);

    setTimeout(function () {
        $("#draggable2").animate({
            "top": "-106px",
            "left": "320px"
        }, 1000);

        $("#draggable2").addClass("activeproduct")
    }, 800);
}

Answer 1

您必须构建一个循环并使 ID 动态化。如果我正确地看到这一点，唯一会改变的是 ID。

// make them all draggable 'at once' if they all have the same left values
for (var i=0; i<90; i++) {
  if ($('#justgarph > p:contains("draggable"' + i + ')').length > 0) {
      $(".product").animate({
          "top": "0",
          "left": "0"
      }, 500).delay(100);

      $("#draggable" + i).animate({
          "top": "-300px",
          "left": "200px"
      }, 500);

      setTimeout(function () {
          $("#draggable" + i).animate({
              "top": "-106px",
              "left": "470px"
          }, 1000);
          $("#draggable" + i).addClass("activeproduct")
      }, 800);
  }
}

如果更改left值是故意的，最好将整个事物放在一个函数中。您的代码将比上面的代码长一点。但只有在所有内容都相同的情况下，它才能在循环中工作。

所以在这里，你有一个包含三个参数的函数。第一个是id带有 a 的 as 文本，#第二个和第三个left是px没有px.

function makeDraggable(id, l1, l2) {
  if ($('#justgarph > p:contains(' + e + ')').length > 0) {
      $(".product").animate({
          "top": "0",
          "left": "0"
      }, 500).delay(100);

      $(e).animate({
          "top": "-300px",
          "left": l1 + "px"
      }, 500);

      setTimeout(function () {
          $(e).animate({
              "top": "-106px",
              "left": l2 + "px"
          }, 1000);
          $(e).addClass("activeproduct")
      }, 800);
  }
}

// make them all draggable, one at a time
makeDraggable('#draggable1', 100, 470);
makeDraggable('#draggable2', 200, 320);