【问题标题】:how to alert something when button with a length is click? [closed]单击带有长度的按钮时如何提醒某些东西? [关闭]
【发布时间】:2015-12-13 07:19:48
【问题描述】:

我有这个按钮

<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 来提醒“你好”之类的东西

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

【问题讨论】:

  • 你能解释一下你想要实现的目标吗
  • 我已经更新了上面的问题
  • 据说每当我添加一个或多个(按钮)时我都有很多按钮,所以 n in class="addmore' + n + '" ..n 应该是 n=1, n=2, n =3 以此类推
  • 你能说出你想要达到的目标吗?

标签: javascript php jquery html database


【解决方案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'));

【讨论】:

  • 当我单击按钮 addmore 时,它​​会创建另一个 div,据说是带有新按钮 addmore 的 taget2 这就是为什么我有 addmore'+n+'
  • 啊,我明白了。然后,它是递归的,每个容器内都有多个“添加更多”。好的,让我看看....
  • 我在上面更新了我的 html :D
  • 我更新了代码。我尽可能不使用'id'。在这种情况下,我会添加与按钮相关的元素。
  • 当我在第二个大框中添加另一个输入时它不起作用
【解决方案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 使用相同的方式

【讨论】:

  • 当我添加另一个 bigbox 时,所有输入仅显示在第一个 bigbox 中
  • 现在可以使用了,非常感谢,你们是天才:D
  • @user101 但请记住,代码可能需要您付出更多努力才能使其按您的需要工作。您会发现更多的东西可以根据您的需要进行修改。但在所有方面,我认为您从该代码中获得了更多积分。祝你好运:)
  • 我会的,是的,谢谢你们:D
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-09
  • 2011-03-26
  • 2018-01-11
相关资源
最近更新 更多