循环生成唯一 ID JavaScript

looping to generate unique id javascript

本文关键字:ID JavaScript 唯一 循环      更新时间:2023-09-26

我想在我的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。但它仍然不能很好地工作..有人可以帮助我吗?我真的很感谢任何帮助:-)

你的代码是正确的,先生:-)

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

您需要将其添加到头部:

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

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

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

希望对你有帮助

根据我的理解,以下代码会导致问题

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

您可以尝试这样的事情:

您可以使用id和分配值进行搜索,而不是用于300迭代的循环。您可以使用$([attribute^=value])获取具有相似idname的元素

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