Question

我有一个带有一个“添加更多高亮”文本链接的文本字段，我需要的是当我每次点击添加链接时我应该能够显示3个div的一个在另一个之下。

根据我的HTML代码;

<input size="20" id="high_light" type="text" maxlength="30" placeholder="Highlights of this offer" /> 
 <span><a href="#" id="add"> + Add more highlights</a></span>
 <div id="highlight1" style="display:none;"><input class="word_count2" size="20" name="high_light2" id="high_light2" type="text" maxlength="30" /></div> 
<div id="highlight2" style="display:none;"><input class="word_count2" size="20" name="high_light2" id="high_light2" type="text" maxlength="30" /></div> 
<div id="highlight3" style="display:none;"><input class="word_count2" size="20" name="high_light2" id="high_light2" type="text" maxlength="30" /></div>

由于阿吉什

Answer 1

        <script type="text/javascript">
        $(function(){
            var count = 1;  
            $('#add').click(function(){
                if(count < 4){
                   $('body').append('<div id="highlight'+count+'"><input class="word_count2" size="20" name="high_light2" id="high_light2" type="text" maxlength="30" /></div> ');
                   if(count == 3){
                      $('#add').hide();
                   } 
                } else {
                   $('#add').hide();
                }
                count++;
            });

        });
        </script>

Answer 2

纯JS版：

<div id="divParent">
    <a onclick="createThreeDivs()">Click me!</a>
</div>

<script type="text/javascript">

function createThreeDivs() {
  for (var i=0; i<3; i++) {
   var div = document.createElement("div");
   var divText = document.createTextNode("Hello World");
   div.appendChild(divText);
   var divParent = document.getElementById("divParent");
   divParent.appendChild(div);
  }
}

</script>

Answer 3

我确信有更优雅的方式，但无论如何都是这样 -

$('#add').click(function() {
    var $additional_div = $('<div style="display:none;"><input class="word_count2" size="20" name="high_light2" id="high_light2" type="text" maxlength="30" /></div>');
    $('#container_div').append($additional_div)
                       .append($additional_div)
                       .append($additional_div);
}

你必须对额外的div id做些什么。他们需要吗？你会重复这个吗？

Answer 4

var clickEle  = document.getElementById("high_light1");
clickEle.onclick = function() {
      var html   = "<div></div><div></div><div></div>";
      var parEle = document.getElementById("container_div");
      parEle.innerHTML += html;
}

Answer 5

$("#add").click(function(){
  $(this).after('<div><input type=text></div>');
  $(this).after('<div><input type=text></div>');
  $(this).after('<div><input type=text></div>');

}）

Answer 6

<script type="text/javascript">
  $(document).ready(function(){
    $('#add').bind('click', function(){
      for(var i=1; i<=3; i++) {
        var highlightId = "highlight"+i;
        var highlightDiv = '<div id="'+highlightId+'" style="display:none;"><input class="word_count2" size="20" name="high_light2" id="high_light2" type="text" maxlength="30" /></div>';
        $('#highlightsContainer').append(highlightDiv);
      }
    });
  });
</script>

<input size="20" id="high_light" type="text" maxlength="30" placeholder="Highlights of this offer" /> 
<span><a href="#" id="add"> + Add more highlights</a></span>
<div id="highlightsContainer"></div>

Javascript在每次点击时添加DIV

6 个答案: