Question

让我解释一下。我有一个练习要做。（在jquery中）

1：创建一个按钮，当我们点击它时，它会显示一个带有不同选项的选项和一个“OK”按钮。

2：我们选择一个，然后我们点击“确定”，它将创建我们选择的内容（数字，名称，密码等），但每个只能创建1个（并且具有邮件，密码等的字符限制）等）。

3：当点击它时，某个单选按钮放在某处显示按钮提交。

（对不起我的英文）

这是我到目前为止所做的。

编辑:(忘了问题）所以我的问题是如何点击OK（姓名，密码等）时我怎样才能创建每个

编辑2：另外如何添加一些正则表达式以限制例如字符数？我应该使用某些功能吗？

HTML〜

<button type="button" id="button">Add un champ</button>

<select style="display:none" id="choix">
    <option value="">--Choisir--</option>
    <option value="mail">Email</option>
    <option value="nom">Nom</option>
    <option value="password">password</option>
    <option value="number">number</option>
</select>


<button style="display:none" type="button" id="OK">OK</button>

<form>

    <div id="div">

    </div>


</form>

JS〜

$(document).ready(function() {
    $("#button").click(function(){
        $("#choix , #OK").toggle();
    });
    $("#choix").change(function() { // lorsqu'on change de valeur dans la liste
    var valeur = $(this).val(); // valeur sélectionnée

        if(valeur != '') { 
            if( valeur == 'mail') { 

                $('#div').append('<p>Mail</p> <input type="text" />');
            }
            else if(valeur == 'nom') {
                $('#div').append('<p>nom</p> <input type="text" />');
            }
            else {

            }
        }
    });
});

Answer 1

也许是这样的？

$(document).ready(function() {
    $("#button").click(function(){
        $("#choix , #OK").toggle();
    });
    $('#OK').click(function(){
      var valeur = $('#choix').val();

        if(valeur != '' && !checkIfExists(valeur)) { 
            switch(valeur) {
                case "mail":
                    $('#div').append('<p>' + valeur + '</p><input type="text" />');
                    break;
                case "nom":
                    $('#div').append('<p>' + valeur + '</p><input type="text" />');
                    break;
                default:
                    break;
            }
        }
    });
});

function checkIfExists(type){
  if($(document).find('p:contains("' + type + '")').length > 0){
    return true;
  }else{
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">Add un champ</button>

<select style="display:none" id="choix">
    <option value="">--Choisir--</option>
    <option value="mail">Email</option>
    <option value="nom">Nom</option>
    <option value="password">password</option>
    <option value="number">number</option>
</select>


<button style="display:none" type="button" id="OK">OK</button>

<form>

    <div id="div">

    </div>


</form>

Answer 2

那么我的问题是如何在点击OK（姓名，密码等）时如何只创建1个

根据您的问题，您必须在“确定”按钮上绑定一个事件，我只是做了一些更改以简化您的代码：

$(document).ready(function() {
  $("#button").click(function() {
    $("#choix , #OK").toggle();
  });
  $("#OK").click(function() {
    var $choix = $('#choix');
    var $txt = $choix.find(':selected').text();
    if ($choix.val() != '') {
      $('#div').append('<p>' + $txt + '</p> <input type="' + $choix.val() + '" />');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">Add un champ</button>
<select style="display:none" id="choix">
    <option value="">--Choisir--</option>
    <option value="email">Email</option>
    <option value="nom">Nom</option>
    <option value="password">Password</option>
    <option value="number">Number</option>
</select>
<button style="display:none" type="button" id="OK">OK</button>

<form>
  <div id="div">
  </div>
</form>

在JQUERY中以特定形式创建

2 个答案: