<分区>
我想要发生的事情
- 当按下添加按钮时，将在添加按钮所在行的下方添加一行
- 当按下删除按钮时，该行将被删除。
- 当悬停或单击某个输入文本时，旁边会显示一个添加按钮。
- 当鼠标未悬停在输入文本上或未选择输入文本时，添加按钮应该消失。
- 将鼠标悬停在某个项目符号上时，会出现一个删除按钮来代替项目符号。
- 当鼠标离开删除按钮时，它将恢复为子弹。
我怀疑我的一些问题发生在 b/c 我将我所有的函数放在 $(document).ready() 中。如果有人能打出我应该使用的 jQuery 代码，我将不胜感激!
发生了什么
添加按钮
只有第一个添加按钮有效。
删除按钮
其他添加行的删除按钮仅在悬停在第一个项目符号上时显示。
删除按钮只能使用一次。删除一行后，删除按钮和添加按钮将失去其功能。删除和添加按钮也没有像它们应该的那样消失。
我的代码
HTML
这是我要添加的行
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" class="btn btn-default button-remove" aria-label="Remove">
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default button-bullet" aria-label="Bullet">
<span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"></span>
</button>
</div>
<input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here">
<div class="input-group-btn">
<button type="button" class="btn btn-default button-add" aria-label="Add">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
jQuery
这些是我用来设置按钮动画和添加/删除行的函数。
$(document).ready(function(){
$("input[type='text'][name='Worksheet-Problem']").closest('.row').hover(function() {
$(".button-add").fadeToggle(300);
})
$(".button-bullet").closest('.input-group-btn').hover(function(){
$('.button-bullet').toggle();
$(".button-remove").toggle();
})
$(".button-add").click(function(){
var $row = $(this).closest('.row');
var $wsProbRow = $row.clone();
$wsProbRow.insertAfter($row);
console.log("Add-Button pressed");
})
$(".button-remove").click(function(){
$(this).closest('.row').remove();
console.log("Remove-Button pressed");
})
})