-1

我需要制作产品列表，并希望能够使用两个 + - 按钮直接在列表中独立添加产品数量。这是代码...

HTML

<ul data-role="listview">
   <li data-icon="false"><a href="">
       <img src="images/1.jpg" alt="" /> text, text</a>
           <div data-role="fieldcontain">
              <button class="plus" id="1" data-icon="plus" data-iconpos="notext">Plus</button>
              <button class="minus" data-icon="minus" data-iconpos="notext">Minus</button>
               <p class="p"><span class="number">0</span></p>
         </div>
   </li>
   <li data-icon="false"><a href="">
       <img src="images/1.jpg" alt="" />text, text</a>
           <div data-role="fieldcontain">
               <button class="plus" id="1" data-icon="plus" data-iconpos="notext">Plus</button>
               <button class="minus" data-icon="minus" data-iconpos="notext">Minus</button>
               <p class="p"><span class="number">0</span></p>
           </div>
     </li>
     <li data-icon="false"><a href="">
         <img src="images/1.jpg" alt="" />text, text</a>
             <div data-role="fieldcontain">
                <button class="plus" id="1" data-icon="plus" data-iconpos="notext">Plus</button>
                <button class="minus" data-icon="minus" data-iconpos="notext">Minus</button>
                <p class="p"><span class="number">0</span></p>
            </div>
     </li>
</ul>
<a href="#" data-role="button" data-inline="true">Order</a>
<a href="#home" data-role="button" data-inline="true">Home</a>

Javascript

var $number = 0;

$('.plus').click(function () {
    $number++;
    $('.number').text($number).css('color', '#97bf0d');
});

$('.minus').click(function () {
    if($number > 0){
        $number--;
    }
    $('.number').text($number);
});

jsfiddle 示例

4

1 回答 1

0

以下是您更新的代码。您只需要使用当前 li 的数字类进行跨度。所以我使用了 jquery 的最接近函数来查找该按钮的父 li 并更新 span .number 并且还需要获取 span.number 的当前值，因为它具有基于 li 项的特定值

var $number = 0;
$('.plus').click(function () {
    var $this = $(this);
    $number = parseInt($(this).closest('li').find('.number').text());
    $number++;
    $(this).closest('li').find('.number').text($number).css('color', '#97bf0d');
});

$('.minus').click(function () {
    $number = parseInt($(this).closest('li').find('.number').text());
    if ($number > 0) {
        $number--;
    }
    $(this).closest('li').find('.number').text($number);
});

检查这个更新的小提琴

于 2013-11-08T14:13:18.297 回答