0

我正在创建两个元素：foo 和 bar，我需要同时链接它们。

<div class="target-1"></div>
<div class="target-2"></div>
<form>
    <input type="text" />
    <button type="submit">Submit</button>
</form>

这些是创建元素的目标。现在这里是js：

var index = 0;
$("form").submit(function(){
  $(".target-1").append(
    $("<span/>", {class: "foo", id: "s-" + index++}));
  $(".target-2").append(
    $("<span/>", {class: "bar s-" + index}));
});

现在这意味着在 target-1 中创建一个 span.foo ，其 id 为“sn”，同时在 target-2 中创建另一个 span.bar ，其类“sn”与该 id 的 id 完全相同跨度.foo。

它实际上做的是创建 span.foo id="s-0" 和 span.bar class="s-1"。我不明白为什么，因为我在第一个追加中增加了索引，然后在第二次追加中设置了索引的当前状态。

这是一个小提琴http://jsfiddle.net/Yrrfd/但我只使用按钮而不使用表单，因为您无法在 jsfiddle 中提交表单。但它应该工作相同，无论如何您都可以看到不同的索引值。

4

5 回答 5

1

您在需要使用的分配之后增加索引++index而不是index++

$(".target-1").append(
    $("<span/>", {class: "foo", id: "s-" + ++index})); // Here
  $(".target-2").append(
    $("<span/>", {class: "bar s-" + index}))
});

小提琴

Post-Increment 运算符将先赋值，然后再递增。您需要预增量运算符。

于 2013-06-17T04:07:07.650 回答
1

您应该使用++index而不是index++.

index++给你价值，然后增加它。++index增加它，然后给你价值。

于 2013-06-17T04:07:36.587 回答
1

您应该使用++index以便索引递增然后使用。这是更新的小提琴：http: //jsfiddle.net/Yrrfd/5/

于 2013-06-17T04:08:25.413 回答
1

我不确定我是否 100% 理解您的要求，但我认为您需要将其更改为

var index = 0;
$("form").submit(function(){
  $(".target-1").append(
    $("<span/>", {class: "foo", id: "s-" + index}));
  $(".target-2").append(
    $("<span/>", {class: "bar s-" + index}));
  index++;
});

或者

var index = 0;
    $("form").submit(function(){
      index++;
      $(".target-1").append(
        $("<span/>", {class: "foo", id: "s-" + index}));
      $(".target-2").append(
        $("<span/>", {class: "bar s-" + index}));
    });
于 2013-06-17T04:10:32.540 回答
0

在第一次索引值是 (0) 和 index++ （首先使用然后递增）所以它将使用 0 然后递增 1 并继续 bar，现在是 1。 

var index = 0;
$("form").submit(function(){
  $(".target-1").append(
    $("<span/>", {class: "foo", id: "s-" + index}));
  $(".target-2").append(
    $("<span/>", {class: "bar s-" + index++}));
});

所以你需要在 bar append 函数中增加你的索引变量。

于 2013-06-17T04:12:02.733 回答