0

我有一个带有一个“添加更多亮点”文本链接的文本字段，我需要的是当我每次点击添加链接时，我应该能够在另一个下方显示 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>

谢谢阿吉什

4

6 回答 6

3 
        <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>
于 2013-02-15T09:05:17.177 回答
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>
于 2013-02-15T09:03:36.037 回答
1

我敢肯定有一种更优雅的方式来做这件事，但无论如何，这里有一些东西 -

$('#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 做一些事情。他们是必需的吗？你要重复这个吗？

于 2013-02-15T09:01:15.677 回答
1 
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;
}
于 2013-02-15T09:08:12.683 回答
0 
$("#add").click(function(){
  $(this).after('<div><input type=text></div>');
  $(this).after('<div><input type=text></div>');
  $(this).after('<div><input type=text></div>');

})

于 2013-02-15T09:05:45.420 回答
0 
<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>
于 2013-02-15T09:40:55.033 回答