j查询文档就绪函数不起作用

Question

>我正在处理一个有 5 个div 的表单，为了保持表单尽可能干净整洁，我用"display： none"隐藏了其中的 4 个。

单击按钮(例如添加客户端)时，我希望下一个div(最多 4 个)与 js 一起显示，当单击另一个按钮(例如删除客户端)时，我希望再次隐藏最后一个显示的div。

.JS：

<script>
$(document).ready(function addClient() {/*mycode*/});
$(document).ready(function removeClient() {/*mycode*/});
</script>

.HTML：

<input id="kkBtnNewClient" type="button" value="New Client" class="kkButton" onclick="addClient()"/>
<input id="kkBtnRemoveClient" type="button" value="Remove Client" class="kkButton" onclick="removeClient()"/>

我试图在/mycode/部分放置一个简单的警报，但我什至没有到达该部分。

Answer 1

当就绪事件触发时，将调用传递给ready()的值。

它不会创建从中调用函数的全局变量。

使用函数声明来执行此操作。更好的是，将事件处理程序与 JavaScript 绑定，根本不要使用onclick属性。

$("#kkBtnNewClient").on("click", function addClient() {
alert("add client");
});
$("#kkBtnRemoveClient").on("click", function removeClient() {
alert("remove client");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="kkBtnNewClient" type="button" value="New Client" class="kkButton" />
<input id="kkBtnRemoveClient" type="button" value="Remove Client" class="kkButton" />

Answer 2

你可以像下面这样尝试：

$(".group_1").hide();
$(".group_2").hide();
$(document).on('click','#kkBtnNewClient', function(){
console.log("kkBtnNewClient clicked");
$(".group_1").show();
$(".group_2").hide();

});
$(document).on('click','#kkBtnRemoveClient', function(){
$(".group_2").show();
$(".group_1").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group_1">
div 1
</div>
<div class="group_1">
div 2
</div>
<div class="group_1">
div 3
</div>
<div class="group_1">
div 4
</div>
<div class="group_2">
div 5
</div>
<input id="kkBtnNewClient" type="button" value="New Client" class="kkButton" />
<input id="kkBtnRemoveClient" type="button" value="Remove Client" class="kkButton" />