Question

我正在开展一个学校项目，我想添加并取走田地（他们应该互相克隆，但使用不同的ID）。这是在 javascript 。

中完成的

也许我错过了什么或直接做错了什么？

$(document).ready(function(){
  var addOpdracht = $('<a/>', {
    'class': 'btn btn-primary'
  }).on('click', function(){
    $('.jumbotron').append(getExerciseBlock(i));
  }).html('<i class="fa fa-plus"></i>');
  $('.jumbotron').append(addOpdracht);
  for(var i = 0; i< 0; i++){
    $('.jumbotron').append(getExerciseBlock(i));
  }
})


function getAddBtn(target, i){
  var addBtn = $('<a/>', {
    'class': 'btn btn-primary'
  }).on('click', function(){
    $(target).append(getWordPartInput(i));
  }).html('<i class="fa fa-plus"></i>');
  console.log(target);
  return addBtn;
}

function getExerciseBlock(i){
  var eBlock = $('<div/>',{
    'id': i,
    'class': 'col-md-12'
  });
  $(eBlock).append(getAudioBtn(i), getWordInput(i), 
    getWordPartInput(i),getAddBtn(eBlock, i));
  return eBlock;
}


function getAddBtn(target, i){
  var addBtn = $('<a/>', {
    'class': 'btn btn-primary'
  }).on('click', function(){
    $(target).append(getWordPartInput(i));
  }).html('<i class="fa fa-plus"></i>');
  console.log(target);
  return addBtn;
}

function getAudioBtn(id, cValue){
  cValue = cValue || '';
  var audioBtn = $('<a/>', {
    'class': 'btn btn-primary'
  }).html('<i class="fa fa-volume-up"></i>');
  return audioBtn;
}

function getWordInput(id, cValue){
  cValue = cValue || '';
  var wInput = $('<input/>', {
    'class': 'form-group form-control',
    'type': 'text',
    'name': 'question_takeAudio_exerciseWord[]',
    'placeholder': 'Exercises'
  })
  return wInput;
}

function getWordPartInput(id, cValue){
  cValue = cValue || '';
  var wpInput = $('<input/>', {
    'class': 'form-group form-control',
    'type': 'text',
    'value': cValue,
    'placeholder': 'Syllables'
  });
  return wpInput;
}

那么，这个想法应该是什么：

我单击var addOpdracht并添加了一个额外的字段（它基本上是克隆），但我需要克隆来获取ID。
第一个字段以ID 0开头，但是当我点击克隆时，第二个字段的ID也为0。
我希望它能获得ID = 1，所以我可以将它发送到JSON文件，然后再发送根据其ID将其拉回来。

那么我做错了什么或者没有看到的是什么？请为我澄清一下。

第二次编辑：我的HTML代码如下。 THRID EDIT：我发现i设置为0定义ID，但如果我设置i = 0; I＆LT; 10; i ++它会给我10个输入块开始，但是我想要一个块开始，每当我点击它再次重现块时，我希望那个具有+1的ID。我很抱歉所有的编辑。我只是想跟上我一直在尝试的东西。

<!doctype html>
<html lang="en">
   <head>
    <title>Exercise CMS</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../assets/vendor/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../../assets/vendor/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../../assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
     <script type="text/javascript" src="js/exercise_CMS.js"></script>

    <link rel="icon" href="http://dk.fcsprint2.nl/favicon.ico?v=2">
    <link rel="stylesheet" type="text/css" href="../../assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="../../assets/vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../assets/vendor/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/fonts.css">
   <!--<link rel="stylesheet" type="text/css" href="style.css">-->
      <!-- <script src="cms.js"></script>-->
</head>
<body>
    <div class="container">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="row">
                            <h2 id="exerciseTitle" class="col-md-8 col-sm-7 col-xs-6">CMS</h2>
                                <div class="col-md-offset-2 col-md-2">
                                    <h2>
                                        <select class="languageSelector form-control required" id="languageSelector" ></select>
                                    </h2>
                                </div>
                        </div>
                    </div>      <!-- end of panel-heading -->
                <div class="panel-body">
                    <div class="jumbotron" id="mainList">
                        <form class="container-fluid" method="POST">

                        </form>
                    </div> 
                </div>      <!-- end of panel-body -->          
            </div>      <!-- end panel-primary -->
        </div>      <!--end panel-group -->
    </div>  <!-- end of container-->

Answer 1

Chage your：

$(document).ready(function(){
  var addOpdracht = $('<a/>', {
    'class': 'btn btn-primary'
  }).on('click', function(){
    $('.jumbotron').append(getExerciseBlock(i));
  }).html('<i class="fa fa-plus"></i>');
  $('.jumbotron').append(addOpdracht);
  for(var i = 0; i< 0; i++){
    $('.jumbotron').append(getExerciseBlock(i));
  }
})

用它并将起作用：

$(document).ready(function(){
    var id = 0;
    var addOpdracht = $('<a/>', {
       'class': 'btn btn-primary'
    }).on('click', function(){
        $('.jumbotron').append(getExerciseBlock(id));
        id++;
    }).html('<i class="fa fa-plus"></i>');

    $('.jumbotron').append(addOpdracht);
})

还有一个提示：请始终保持您的代码格式化，这将在很多方面为您提供帮助，并为您节省大量时间！

我似乎无法为每个块获得单独的ID

1 个答案: