شيء نوع jQuery Spinner

Question

أحاول إنشاء شيء من نوع jQuery Spinner في وقت سابق اليوم أعطاني شخص ما هذا الرمز مما يزيد من قيمة حقل النص لأعلى/لأسفل على زر النقرات. جميل. ولكن ماذا تفعل لتعطيل زر .desc إذا كانت القيمة 0 - صفر. في PHP سهل للغاية إذا كان <= 0 ثم هذا وما إلى ذلك ... لكنني لا أعرف jQuery ..

أيضا أي أفكار كيف يمكن استخدامها للتحرك لأعلى/لأسفل قائمة HTML غير المرتبة ، أي ul li؟

$(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" />

Answer 1

ها هو رمز بلدي ،

$(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 لتظهر كما هو مطلوب.

ليس هذا هو الرمز الأمثل ، ولكن يجب أن يعطيك فكرة عن كيفية عمله حسب متطلباتك.

Answer 2

uhm jquery لا يزال JavaScript ، فلماذا لا تستخدم

$(".dec")
    .click(
        function(){
            if(Number($(":text[name='qty']").val() > 0)
            {
                $(":text[name='qty']")
                    .val( Number($(":text[name='qty']").val()) - 1 
                );
            }
         }
     );

أعني ، جافا سكريبت if'س. إذا فهمتك بشكل صحيح

Answer 3

نظرًا لأن الكود يستخدم صورة بدلاً من زر أو عنصر إدخال ، لا يمكنك تعطيلها حقًا. أسهل شيء يجب فعله هو إخفاءه الذي سيكون:

$(":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');
    }

Answer 4

باستخدام وظائف منفصلة للتعامل مع الزيادة والانخفاض من الدوار. لن يعمل التعطيل إلا على عناصر النماذج ، ولكن بما أنك تمثل عناصر تحكم الدوار باستخدام الصور ، يمكنك الاتصال .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");
}

بالطبع ، يجب إعادة تمكين هذه عندما تتغير القيمة مرة أخرى. لكنني متأكد من أنه يمكنك فعل ذلك.