限制按鈕內的點擊次數 - jquery

我使用Jquery克隆了一些表單輸入onclick。我想要實現的是，添加按鈕內的計數器觸發這兩個按鈕之一上的事件。如果計數爲0（零），我想禁用添加按鈕併爲其分配一個類（不活動）。如果計數是9，我想禁用del鍵併爲它分配一個類（not-acitve）。限制按鈕內的點擊次數 - jquery

我的代碼如下所示：

<button id="add" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button> 
<button id="del" class="active" type="button">Upcount</button>

jQuery的是這樣的：

$(document).ready(function() { 

    var upcount = 0; 
    var downcount = 0; 
    var start = 9; 

    $("#add").click(function() { 
    upcount++; 
    $("#counter").html(start - upcount + downcount); 
    }); 

    $("#del").click(function() { 
    downcount++; 
    $("#counter").html(start - upcount + downcount); 
    }); 

});

我也提出了這一個小提琴：https://jsfiddle.net/phii/8zf31158/

有人可以幫助我與if語句甚至更優雅的方式來實現我的目標？

提前致謝！

來源

2016-12-12 арно нюм

您可能希望相反。當計數器爲零時禁用「向下」按鈕，當它爲9時禁用「向上」按鈕。這樣就不會越過0-9範圍。無論如何，你可以簡單地使用'$（this）.prop（'disabled'，1）;'來禁用按鈕。 – haim770

當然！我想留在0到9的範圍內;）你能給我一個代碼示例給你的推薦嗎？我真的是一個血腥的noob :( –

更改您的方法並只使用一個counter。

之後，您可以創建一個函數，檢查您的button的值爲counter和disable。

$(document).ready(function() { 
 
    var counter = 9; 
 
    
 
    $("#add").click(function() { 
 
    counter++; 
 
    $("#counter").html(counter); 
 
    checkcounter(); 
 
    }); 
 

 
    $("#del").click(function() { 
 
    counter--; 
 
    $("#counter").html(counter); 
 
    checkcounter(); 
 
    }); 
 
    
 
    function checkcounter() 
 
    { 
 
    if(counter >= 10) 
 
     $("#add").prop("disabled",true); 
 
    else if(counter<=0) 
 
    { 
 
     $("#del").prop("disabled",true); 
 
    } 
 
    else 
 
    { 
 
     $("#add").prop("disabled",false); 
 
     $("#del").prop("disabled",false); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button> 
 
<button id="del" class="active" type="button">Upcount</button>

來源

2016-12-12 13:30:25 Alexis

這對我的需求甚至更好 - 非常感謝！@Turnip解決了它，就像它滿足了我在添加類時的需求。但是這真的是成功，因爲它真的禁用了按鈕我需要的是，因爲按鈕也必須停止克隆輸入。非常感謝！最佳答案。我真的很感謝你的幫助！ –

再次感謝！我將它實現到我的表單中，它的工作方式就像一個魅力。 –

@арнонюм沒問題;） – Alexis

我認爲你可以像this做的更優雅的方式來實現自己的目標。

var upcount = 9; 
 
function updateCount() { 
 
    $("#counter").html(upcount); 
 
} 
 
$(document).ready(function() { 
 
    $("#add").click(function() { 
 
     (upcount < 9) && upcount++; 
 
     updateCount(); 
 
    }); 
 
    $("#del").click(function() { 
 
     (upcount > 0) && upcount--; 
 
     updateCount(); 
 
    }); 
 
});

<button id="del" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button> 
 
<button id="add" class="active" type="button">Upcount</button> 
 
<script 
 
    src="https://code.jquery.com/jquery-1.12.4.min.js" 
 
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
 
    crossorigin="anonymous"></script>

來源

2016-12-12 13:32:28

限制按鈕內的點擊次數 - jquery

回答

相關問題