0

「ハイライトを追加」テキストリンクが1つあるテキストフィールドがあります。リンクを追加するたびにクリックすると、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 
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 に答える
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 に答える
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 に答える
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 に答える