Question

$(document).ready(function () {
    toggleFields(); 
});

function toggleFields() {
    if ($("#people").val() == 1)
        $("#personen1").show();
    else
        $("#personen1").hide();
        $("#personen2").hide();
        $("#personen3").hide();
        $("#personen4").hide();
        $("#personen5").hide();
        $("#personen6").hide();
        $("#personen7").hide();
        $("#personen8").hide();
        
}

    <p>Personen:
       <input type="number" id="people" name="ppl" min="1" class="uniform-input number" value="1" required="">
    </p>
     <div id="personen1">
        <p>1. Person:
            <input id="personen1_person1" type="text" name="person_name" />
        </p>
    </div>
    <div id="personen2">
        <p>1. Person:
            <input id="personen2_person1" type="text" name="person_name" />
        </p>
        <p>2. Person:
            <input id="personen2_person2" type="text" name="person2_name" />
        </p>
    </div>
    <div id="personen3">
        <p>1. Person:
            <input id="personen3_person1" type="text" name="person_name" />
        </p>
        <p>2. Person:
            <input id="personen3_person2" type="text" name="person2_name" />
        </p>
        <p>3. Person:
            <input id="personen3_person3" type="text" name="person3_name" />
        </p>
    </div>

我的目标网页上有人员编号输入。我想使用输入值将字段添加到我的结帐。就像输入是5我想在我的结账页面中有5个字段，以便客户可以填写名称。上面的代码无法正常工作。我错过了什么？

Answer 1

您所犯的第一个也是最重要的错误是复制id s，它们应该是唯一的，否则可能会出现意想不到的效果。

接下来就是，该代码段不起作用，因为您没有包含jQuery库，这比执行$函数更重要。

第三，找到你犯过的这些错误：

您没有使用输入绑定事件。
您需要检查输入是否存在id。
您没有正确关闭if。
您可以使用class或在id选择器中使用$来有效地压缩代码。

$(document).ready(function () {
  toggleFields();
  $("#people").on("keyup change", function () {
    toggleFields();
  });
});

function toggleFields() {
  $("#personen1, #personen2, #personen3, #personen4, #personen5, #personen6, #personen7, #personen8").hide();
  if ($("#people").val() < 9)
    $("#personen" + $("#people").val()).show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Personen:
  <input type="number" id="people" name="ppl" min="1" class="uniform-input number" value="1" required="">
</p>
<div id="personen1">
  <p>1. Person:
    <input id="person1-1" type="text" name="person_name" />
  </p>
</div>
<div id="personen2">
  <p>1. Person:
    <input id="person2-1" type="text" name="person_name" />
  </p>
  <p>2. Person:
    <input id="person2-2" type="text" name="person2_name" />
  </p>
</div>
<div id="personen3">
  <p>1. Person:
    <input id="person3-1" type="text" name="person_name" />
  </p>
  <p>2. Person:
    <input id="person3-2" type="text" name="person2_name" />
  </p>
  <p>3. Person:
    <input id="person3-3" type="text" name="person3_name" />
  </p>
</div>

Answer 2

您不应该有多个具有相同值的ID。

这不是一种正确的方法，您应该仅使用JavaScript生成HTML：

// Sample code, you can create a function for this as well.
$(function(){

    var count = 5; // Change this count with the input field value.
    var _html = "";
    for(var i=0; i<count; i++){
        _html += '<p>'+(i+1)+'. Person:'
                    +'<input id="person'+(i+1)+'" type="text" name="person'+(i+1)+'_name" />'
                +'</p>';
    }

    $(".container").html(_html);

});

这是fiddle

Answer 3

您在网页上使用的每个id属性必须在整个文档中唯一，同样 - 您正在使用某种用户键入数字时要加载的模板，但如果用户想要添加10个人而不是3个或5个，该怎么办？单独添加案例将会给你带来很大的痛苦。

我也理解你希望用户输入一个数字，然后从中获取一定数量的字段，并假设代码

$(document).ready(function() {
    toggleFields();
});

将无效，因为它只执行一次，页面的 onload 并且之后不再执行，因为没有绑定任何事件。

＆＃13;

var insertPeople = function(n) {
    var amt = !isNaN(n) ? n : 1;
    var fieldStr = '';
    //using a for loop to 'build' the fields dynamically
    for (var i = 0; i < amt; i++) {
        var num = i + 1;
        fieldStr += '<p>'+ num +'. person<input type="text" id="person'+ num +'" name="person'+ num +'_name"></p>'
    }
    //append HTML to container
    $('#people-container').html(fieldStr);
}


//Use this to insert fields on page load instantly.
$(insertPeople);

//Use this if you would like a user to control the amount of fields through an input field.
$(function() { //shorthand for $(document).ready
    $('#people').on('keyup', function() {
        insertPeople($(this).val());
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="people" value="1" />
<div id="people-container"></div>

＆＃13;

此代码将循环 n 次，其中 n 是用户输入（验证自己的类型）并创建ID为＃0的字段通过循环结束时的结束点。在最后一步，它将字段附加到容器，如果这是一个表单，那么该表单将只是使用这些值提交。

根据值切换字段

3 个答案: