-1

製品のリストを作成する必要があり、2 つの + - ボタンを使用して、製品の数を個別にリストに直接追加できるようにしたいと考えています。これがコードです...

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 を更新しました。また、li 項目に基づいて特定の値を持っているため、span.number の現在の値を取得する必要があります。

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 に答える