gpt4 book ai didi

javascript - 单击 button1 并将文本添加到 div,单击 button2 并删除文本和 css 样式 button1

转载 作者:行者123 更新时间:2023-11-28 03:34:22 27 4
gpt4 key购买 nike

当我点击 .add-btn 时,我将 .add-btn 的样式更改为 background:#cccccc 并将 val() 更改为“-”。

现在当我用 tr td .list 删除添加的文本时,它是列表中的一行,我想要那个 .add-btn 按钮将删除的行添加到样式返回背景:#232323 with val() "+ ".

我遇到的问题是有 10 个类名为 .add-btn 的按钮,我现在如何在已单击的 10 个按钮中添加文本?​​

jQuery("tr td .list").live('click', function() {
jQuery(this).closest("tr td").remove();
});


jQuery(".add-btn").click(function(event) {
jQuery(this).val("-");
jQuery(this).css("background", "#cccccc");
event.stopImmediatePropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tbody>
<tr></tr><tr><td><div class="list"><p class="delete-list-domains">X</p>added text in a list</div></td></tr><tr></tr>
</tbody>

<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">

最佳答案

您必须为每个按钮分配不同的 id,给相同的 id 是错误的。

$("tbody").on('click', '.list', function() {
console.log($(this).find("tr"));
var btn = $(this).data('id');
$('#'+btn).trigger('click');
$(this).remove();
});


$(".btn-xs").on('click', function(event) {
var id = $(this).attr('id');
if($(this).hasClass('add-btn')) {
$(this).removeClass('add-btn')
.addClass('rm-btn')
.val('-')
.css('background','#cccccc');
$('tbody').append('<tr><td><div class="list" data-id='+id+'><span class="delete-list-domains">X</span> added text in a list by '+id+'</div></td></tr>');
} else if($(this).hasClass('rm-btn')) {
$(this).removeClass('rm-btn')
.addClass('add-btn')
.val('+')
.css('background','#fffff');
$('[data-id="'+id+'"]').remove();
} else {
alert('error')
}
});
.delete-list-domains{ color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table>
<tbody id="content">

</tbody>
</table>
<hr/>
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn1">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn2">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn3">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn4">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn5">

关于javascript - 单击 button1 并将文本添加到 div,单击 button2 并删除文本和 css 样式 button1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44568408/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com