Question

我正在处理具有5个div的表单，为了使表单尽可能整洁，我使用“ display：none”将其中4个隐藏起来。

当单击按钮（例如，添加客户端）时，我希望使用js显示下一个div（最多4个），并且单击另一个按钮（例如，删除客户端）时，我希望最后显示的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" />

jQuery文档就绪功能不起作用

2 个答案: