我怎么能循环.on()?

时间:2016-05-31 14:43:07

标签: jquery binding

我正在创建一个两个绑定函数,一个用于"更改"另一个用于"点击"使用.on()。它适用于我改变的第一个元素,但它不再适用于第二个元素。与"点击"相同我试图用("选择器")包装我的.on()。每个()希望它会循环,但它仍然是相同的。有人可以帮忙,对不起,我还是新手。我只是希望它适用于所有将被更改的输入文本以及将被单击的所有链接。以下是我的代码。

//on click
$("div.productitemcell a").on("click", function() {
    var t = $(".sc-pn-size .productitemcell").length;
    if (t > 1) {
        $("a#catshopbuy").hide();
        $("#warning").show();
    }
});

//on change
$("div.productitemcell input").bind("change", function() {
    var t = $(".sc-pn-size .productitemcell").length;
    if (t > 1) {
        $("a#catshopbuy").hide();
        $("#warning").show();
    }
});

这是html。

<table class="cart">
    <tbody>
       <tr class="var">
          <th>Product</th>
          <th class="quantity">QTY</th>
          <th class="remove">&nbsp;</th>
          <th class="price">Price</th>
          <th class="total" colspan="2">Total</th>
      </tr>
      <tr class="val">
         <td>
          <div class="sc-pi">{tag_productimage}</div>
          <div class="sc-pn">
          <div class="sc-pn-box">
          <div class="sc-pn-name">{tag_productname}</div>
          <div class="sc-pn-code">{tag_productcode}</div>
          <div class="sc-pn-size">{tag_custom2}</div>
          </div>
          </div>
         </td>
         <td class="quantity">
          <div class="productitemcell">
           <input type="text" value="1" class="cartInputText">
          </div>
          </td>
         <td class="remove">
           <div class="productitemcell"><a href="#">Remove</a></div>
         </td>
         <td class="price">{tag_productextaxamount}</td>
         <td class="total">{tag_producttotal}</td>
        </tr>

        </tbody>
       </table>


  <ul>
   <li>Subtotal:<span>{tag_productgrandtotal}</span></li>
   <li>Shipping Fee:<span>{tag_shippingtotal}</span></li>
   <li>Promo Code:<span></span> </li>
   <li><strong>Total:<span>{tag_invoicetotal}</span></strong></li>
  </ul>

 <div id="warning" style="display:none;">
    <p>You can only purchase one product at a time.</p>
</div>

<div class="columns medium-4 pp">
<a id="catshopbuy"><img alt="" src="/images/btn-checkout_now.jpg" /></a>
</div>

请忽略此处显示的标签。这些是由我使用的cms生成的。基本上,我在购物车上工作,由于运费问题,客户无法一次查看超过1种产品。所以,这里的产品数量会增加。客户将删除或更新产品数量。当我删除一个产品时,它很好,但当我删除另一个产品时它不再有效。

1 个答案:

答案 0 :(得分:1)

使用函数并进行回调。

function callBack() {
    var t = $(".sc-pn-size .productitemcell").length;
    if (t > 1) {
        $("a#catshopbuy").hide();
        $("#warning").show();
    }
}
//on click
$("div.productitemcell a").on("click", callBack);
//on change
$("div.productitemcell input").bind("change", callBack);