麻煩jQuery和遍歷DOM來選擇合適的元素

好傢伙，我有以下HTML爲一些在我的網站產品，麻煩jQuery和遍歷DOM來選擇合適的元素

它會顯示一個符合產品名稱，價格，數量要和一個複選框稱爲購買。此時數量輸入被禁用。

所以我想要做的是， 如果點擊複選框，我希望輸入數量設置爲1，我希望它啓用。

我這樣做似乎有些麻煩。任何人都可以幫助現在我可以有多個產品，即在我的html頁面中會有多個表格產品div。

我已經嘗試使用jQuery來改變細節，但我似乎無法訪問某些元素。

因此，基本上對於每個表格產品，我想在複選框上放置一個點擊偵聽器，以設置輸入文本的值，即qty文本字段。

因此，下面可能有20頁。

<div class="table-products"> 
    <div class="table-top-title"> 
     My Spelling Workbook F 
    </div> 
    <div class="table-top-price"> 
     <div class="price-box"> 
      <span class="regular-price" id="product-price-1"><span class="price">€6.95</span></span> 
     </div> 
    </div> 
    <div class="table-top-qty"> 
     <fieldset class="add-to-cart-box"> 
      <input type="hidden" name="products[]" value="1"> <legend>Add Items to Cart</legend> <span class="qty-box"><label for="qty1">Qty:</label> <input name="qty1" disabled="disabled" value="0" type="text" class="input-text qty" id="qty1" maxlength="12"></span> 
     </fieldset> 
    </div> 
    <div class="table-top-details"> 
     <input type="checkbox" name="buyMe" value="buy" class="add-checkbox"> 
    </div> 

    <div style="clear:both;"></div> 
</div>

這裏是JavaScript我曾嘗試

jQuery(document).ready(function() { 
    console.log('hello'); 

    var thischeck; 
    jQuery(".table-products").ready(function(e) { 
     //var catTable = jQuery(this); 
     var qtyInput = jQuery(this).children('.input-text'); 

     jQuery('.add-checkbox').click(function() { 
      console.log(jQuery(this).html()); 
      thischeck = jQuery(this); 
      if (thischeck.is(':checked')) 
      { 
       jQuery(qtyInput).first().val('1'); 
       jQuery(qtyInput).first().prop('disabled', false); 
      } else { 

       } 

     }); 

    }); 
    // Handler for .ready() called. 
});

來源

2012-04-19 molleman

你有jQuery的拼寫，因爲另一個插件或庫，也利用了$，以避免衝突的呢？ – Lazerblade 2012-04-19 18:48:29

是這就是爲什麼 – molleman 2012-04-19 18:50:11

不是最直接的方法，但這應該工作。

jQuery(document).ready(function() { 
    jQuery('.add-checkbox').on('click', function() { 
     jQuery(this) 
     .parents('.table-products') 
     .find('input.input-text') 
     .val('1') 
     .removeAttr('disabled'); 
    }); 
});

來源

2012-04-19 18:52:44 kmfk

你能解釋這個給我，因爲它工作的魅力 – molleman 2012-04-19 18:55:03

我喜歡你的初始方法更多，因爲它沒有昂貴的使用.parents（），但這只是個人的;） – 2012-04-19 18:58:17

我同意使用父母（）並不理想。 @molleman - 這只是偵聽任何元素上的任何點擊事件，現在或者在稍後添加到與選擇器'.add-checkbox'匹配的dom中。然後它抓住父div，然後查找裏面的'.input-text'字段。所以只要html結構保持不變，這應該工作。 http://api.jquery.com/on/ - 供參考。 – kmfk 2012-04-19 19:11:15

使用

jQuery('.add-checkbox').change(function() {

問題是一個你觀察點擊不會改變，所以使用的改變，而作爲它一方面在狀態改變後真的觸發

var qtyInput = jQuery(this).children('.input-text');

另一件事是，輸入的。表產品

沒有直接的孩子看到這fiddle

來源

2012-04-19 18:52:21

jQuery('input:checkbox.add-checkbox').on('change', function() { 
     jQuery(this) 
      .parent() 
      .prev('div.table-top-qty') 
      .find('fieldset input:disabled.qty') 
      .val(this.checked | 0) 
      .attr('disabled', !this.checked); 
    });

來源

2012-04-19 18:59:45 thecodeparadox

這應該讓你在正確的方向開始。基於jQuery 1.7.2（我看到你的道具調用，並猜測這就是你正在使用的）。

$(document).ready(function() { 

    var thischeck; 
    $('.table-products').on('click', '.add-checkbox', function() { 

     var qtyInput = $(this).parents('.table-products').find('.input-text'); 
     thischeck = $(this); 
     if (thischeck.prop('checked')) { 
      $(qtyInput).val('1').prop('disabled', false); 
     } else { 
      $(qtyInput).val('0').prop('disabled', true); 
     } 

    }); 
});

由於某種原因刪除屬性往往會阻止它被重新添加。這適用於多個表格。對於你的衝突，只需用jQuery替換$。

這裏的小提琴：http://jsfiddle.net/KqtS7/5/

來源

2012-04-19 19:22:51 Lazerblade

麻煩jQuery和遍歷DOM來選擇合適的元素

回答

相關問題