jQuery 스피너 유형
-
20-09-2019 - |
문제
나는 오늘 일찍 jQuery 스피너 유형을 만들려고 노력하고 있습니다. 오늘 누군가가 나에게 버튼 클릭의 텍스트 필드 값을 위/아래로 증가시키는이 코드를 나에게 주었다. 환상적입니다. 그러나 값이 0 -Zero 인 경우 .desc 버튼을 비활성화하려면 어떻게합니까? PHP에서 <= 0이면 매우 쉽게 <= 0이지만 ... jQuery를 모릅니다 ..
또한 비정규 HTML 목록을 위/아래로 이동하는 데 어떻게 사용될 수 있는지 아이디어가 있습니까?
$(document).ready(function()
{
$(function()
{
$(".inc").click(function()
{
$(":text[name='qty']").val(Number($(":text[name='qty']").val()) + 1);
});
$(".dec").click(function()
{
$(":text[name='qty']").val(Number($(":text[name='qty']").val()) - 1);
});
});
});
이것은 양식을 사용합니다.
<input type="text" name="qty" value="0" />
<img src="img/up.png" class="inc" width="20px" height="9px" alt="Increase" title="increase" />
<img src="img/down.png" class="dec" width="20px" height="9px" alt="Decrease" title="Decrease" />
해결책
여기 내 코드가 있습니다.
$(document).ready(function () {
var textElem = $(":text[name='qty']"),
getTextVal = function() {
var val = parseInt(textElem.val(), 10);
return isNaN(val) ? 0 : val;
};
$(".inc").click(function () {
textElem.val(getTextVal() + 1);
});
$(".dec").click(function(){
if( getTextVal() == 0) {
return false;
}
textElem.val(getTextVal() - 1);
});
});
이미지 '.dec'은 텍스트 요소의 값이 0에 도달함에 따라 감소를 중지하면 사용자가 전환을 알아 차릴 수 있도록 클래스 이름을 이미지에 동적으로 추가하고 제거 할 수 있습니다.
이 목적으로 버튼을 사용하는 것이 좋습니다. CSS와 함께 스타일링되어 필요에 따라 나타날 수 있습니다.
이것은 최적화 된 코드가 아니지만 요구 사항에 따라 작동하는 방법에 대한 아이디어를 제공해야합니다.
다른 팁
uhm jquery는 여전히 JavaScript이므로 사용하지 않겠습니까?
$(".dec")
.click(
function(){
if(Number($(":text[name='qty']").val() > 0)
{
$(":text[name='qty']")
.val( Number($(":text[name='qty']").val()) - 1
);
}
}
);
JavaScript가 있습니다 if
'에스. 내가 당신을 올바르게 이해했다면
코드는 버튼 또는 입력 요소 대신 이미지를 사용하므로 실제로 비활성화 할 수 없습니다. 가장 쉬운 일은 그것을 숨기는 것입니다.
$(":text[name='qty']").change(function() {
if($(this).val() <= 0) {
$(".dec").hide();
} else {
$(".dec").show();
}
}):
감소 "버튼"을 입력 또는 버튼 요소로 변경하면 기능 코드를 다음과 같이 변경할 수 있습니다.
if($(this).val() <= 0) {
$(".dec").attr('disabled','disabled');
} else {
$(".dec").removeAttr('disabled');
}
별도의 기능을 사용하여 스피너의 증분 및 감소를 처리합니다. 비활성화는 폼 요소에서만 작동하지만 이미지를 사용하여 스피너 컨트롤을 나타내므로 호출 할 수 있습니다. .hide()
그리고 .show()
그것에 대해 increment
그리고 decrement
.
function increment() {
var textField = $(":text[name='qty']");
var value = Number(textField.val()) + 1;
textField.val(value);
}
function decrement() {
var textField = $(":text[name='qty']");
var value = Number(textField.val()) - 1;
textField.val(value);
if(value == 0) {
$(".dec").attr("disable", "disable");
}
}
$(document).ready(function() {
$(".inc").click(increment);
$(".dec").click(decrement);
});
이 스피너를 사용하여 반대되지 않은 목록을 오르 내릴 수 있지만 목록의 현재 위치를 추적해야합니다. 그만큼 decrement
기능은 이미 0 이하로 가지 않도록 처리합니다. 목록의 마지막 항목에있는 경우 증분을 비활성화해야합니다. 이와 같은 것이 효과가 있어야합니다.
if(current == $("#list > li").size() - 1) {
$(".inc").attr("disable", "disable");
}
물론 값이 다시 변경되면 다시 활성화되어야합니다. 그러나 나는 당신이 그렇게 할 수 있다고 확신합니다.