jQuery 文檔就緒功能不起作用

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()的值在 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" />