使用循环生成唯一ID的JavaScript代码

Question

我想在我的javascript中获得唯一的ID，所以我使用循环，在ID名称后面添加它。
这是我的HTML代码：

$(document).ready(function() {
  $('input[type="checkbox"]').on('click', function() {
    if ($(this).is(":checked")) {
      var a;
      for (a = 1; a < 300; a++)
        // if checked   add value
        $("#abc" + a).val($('#xyz' + a).attr('value'));
    } else {
      // if unchecked remove value
      $("#abc" + a).val("");
    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" name="check1" id="check1" />
<input type="text" id="xyz1" name="xyz1" value="3" />
<input type="text" id="abc1" name="abc1" />

<input type="checkbox" name="check2" id="check2" />
<input type="text" id="xyz2" name="xyz2" value="5" />
<input type="text" id="abc2" name="abc2" />

以下是我的 JavaScript 代码：

我在 ID 名称后面添加了 "a"，以便生成与文本相同的 ID。但它仍然无法正常工作...有人可以帮忙吗？非常感谢任何帮助 :-)

- Reza M

---

在 HTML 中有 300 个 input 元素吗？for 循环的目的是什么？ - guest271314

不是的，这只是最大循环值。for循环的目的是生成唯一的ID。因此，在#abc后面添加了“a”。 - Reza M

你应该在for循环周围加上{}，并且在if语句后面不需要分号。 - Alexis Tyler

您正在使用for循环生成唯一的ID，从“#abc1”到“#abc299”，并将相关元素的值设置为相应的唯一ID“#xyz1”到“#xyz299”的元素的值。这已经在现有代码中设置好了。问题在于什么不清楚-您所说的“它仍然无法正常工作”是什么意思？想要实现什么结果呢？ - DACrosby

除了for循环之外，唯一缺少的就是jQuery...但我想那就是全部了。 - dvenkatsagar

Answer 1

您的代码是正确的，先生 :-)

http://codepen.io/zer00ne/pen/dGKvBL/

您需要将以下代码添加到头部:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

- zer00ne

---

我本来也想加上这个，你比我更快！这是一个 jsFiddle 版本的链接：https://jsfiddle.net/daCrosby/mwvg36b6/。 - DACrosby

Answer 2

我认为这应该可以解决问题：

$(document).ready(function () {
  $('input[type="checkbox"]').on('click', function() {
    for(var a = 1; a < 300; a++){
      if($(this).is(":checked")){
        // if checked   add value
        $("#abc"+a).val($('#xyz'+a).attr('value'));
      }else{
        // if unchecked remove value
        $("#abc"+a).val("");
      }    
    }
  });
});

更新：

考虑到问题中的更新代码，如果您有一个常见的模式，例如一个复选框和2个字段重复出现，建议您使用类而不是每次生成唯一ID。

<input class="chk" type="checkbox" name="check1" id="check1" />
<input class="xyzs" type="text" id="xyz1" name="xyz1" value="3"/>
<input class="abcs" type="text" id="abc1" name="abc1" />

<input class="chk" type="checkbox" name="check2" id="check2" />
<input class="xyzs" type="text" id="xyz2" name="xyz2" value="5"/>
<input class="abcs" type="text" id="abc2" name="abc2" />

现在 jQuery 的代码可能是这样的：

$("input[type='checkbox']").on('click',function(){
  $(".chk").each(function(i,ch){
    var abc = $(".abcs");
    var xyz = $(".xyzs");
    if($(this).is(":checked")){
      $(abc[i]).val($(xyz[i]).val());
    }else{
      $(abc[i]).val(" ");
    }
  });
});

希望它有所帮助。

- dvenkatsagar

---

谢谢您的帮助。但结果与我已经完成的相同。还有其他建议吗？@dvenkatsagar - Reza M

抱歉，我更新了我的代码，现在有两个复选框。预期的结果是当复选框勾选时，在abc文本中显示xyz值。@dvenkatsagar - Reza M

Ya类可以相同，但ID必须是唯一的......但是当您通过类选择时，您需要循环它，因为它会返回一个元素数组。但如果是ID，则可以选择单个元素。 - dvenkatsagar

谢谢@dvenkatsagar。这真的很有帮助。我很感激你。 - Reza M

这个问题与主题无关，您可能需要将其作为一个新问题发布。 - dvenkatsagar

Answer 3

根据我的理解，以下代码引起了问题。

if ($(this).is(":checked")) {
  var a;
  for (a = 1; a < 300; a++)
    // if checked   add value
    $("#abc" + a).val($('#xyz' + a).attr('value'));
} else {
  // if unchecked remove value
  $("#abc" + a).val("");

如果你注意到了，如果$(this).is(":checked")没有被选中，那么a是未定义的，因此它不会设置值。同时，应该将设置条件放在循环内部而不是外部。

$(document).ready(function() {
  $('input[type="checkbox"]').on('click', function() {
    for (a = 1; a < 300; a++) {
      if ($(this).is(":checked")) {
        var a;
        // if checked   add value
        $("#abc" + a).val($('#xyz' + a).attr('value'));
      } else {
        // if unchecked remove value
        $("#abc" + a).val("");
      };
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" name="check1" id="check1" />
<input type="text" id="xyz1" name="xyz1" value="3" />
<input type="text" id="abc1" name="abc1" />

<input type="checkbox" name="check2" id="check2" />
<input type="text" id="xyz2" name="xyz2" value="5" />
<input type="text" id="abc2" name="abc2" />

你甚至可以尝试这样做：

不用循环300次，你可以使用id进行搜索并赋值。你可以使用类似的id或name获取元素，使用$([attribute^=value])来获取。

$(document).ready(function() {
  $('input[type="checkbox"]').on('click', function() {
    var val = $(this).is(":checked") ? $(this).parent().find("[id^=xyz]").val() : "";
    $(this).parent().find("[id^=abc]").val(val);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <input type="checkbox" name="check1" id="check1" />
  <input type="text" id="xyz1" name="xyz1" value="3" />
  <input type="text" id="abc1" name="abc1" />
</div>

<div>
  <input type="checkbox" name="check2" id="check2" />
  <input type="text" id="xyz2" name="xyz2" value="5" />
  <input type="text" id="abc2" name="abc2" />
</div>

- Rajesh

---

当"check1"被选中时，文本"abc1"显示值3，当"check2"被选中时，文本"abc2"显示值5。 - Reza M

如果是这种情况，我们应该能够使用“this”导航到节点，而不使用循环。 - Rajesh

@RezaM 我已经更新了我的答案，使用this进行导航。此外，我还修改了HTML。请确保检查一下。 - Rajesh

哇，太棒了。它像预期的那样工作得很好 :-）。感谢 @Rajesh - Reza M

根据我的理解，您有一个数组并从中生成HTML。现在您想将整个HTML保存在数据库中。为了做到这一点，您可以创建一个HTML字符串，而不是在循环中附加元素，并使用.html()分配此html。另外，我认为最好不要将整个HTML保存在数据库中。相反，保存数据并使用JavaScript生成您的HTML。 - Rajesh