Question

我有这个按钮

<div class="bigbox">
    <input type="text" placeholder="bigboxinput">
    <div class="smallbox">
        <input type="text" placeholder="smallboxinput1">
        <button class="addinput">Add another input</button>
    </div>   
</div>
<button class="addbigbox">Add another bigbox</button>

当我点击该按钮时，我想用javascript

提醒“hello”

<script> 
var n = $('.addmore').length + 1;
$('.addmore').click(function(){  //I dont know what to do here
alert('Hello');
</script>

Answer 1

这是一个jsfiddle：

https://jsfiddle.net/mckinleymedia/cxu429e7/8/

我假设这样的HTML：

<div>
  <div class="bigbox">
    <div class="smallbox">
      <input type="text" />
      <button class="addinput">Add an input</button>
    </div>
  </div>
  <button class="addbigbox">Add a bigbox</button>
</div>

这是代码：

$('.addbigbox').click(function() {
  var target = $('<button>')
      .addClass('addinput')
      .html('add an input');
  $(this)
    .before(
    $('<div>')
    .addClass('bigbox')
    .append(
      $('<input>')
      .attr('type','text')
    )
    .append(
      target
    )
  )
  addInput(target);
});
var addInput = function(target){
  target.click( function() {
    $(this)
      .before(
      $('<input>')
      .attr('type','text')
    )
  });
};
addInput($('.addinput'));

Answer 2

$('button.addinput').on('click', function(){
   var ThisIt = $(this);
   var n = $('input[type=text]').length + 1;
   $('<input value="input '+n+'" type="text">').insertBefore(ThisIt);
});

注意：请务必包含jquery

Working Demo

您可以使用相同的方式使用.addbigbox

单击长度按钮时如何提醒某些内容？

2 个答案: