2016-01-28 88 views
1

我想使用FancySelect.js風格在WooCommerce上使用的選擇框,並管理了一些,但我努力與產品頁面上的變化形式。WooCommerce - 觸發變化選擇與自定義選擇框

FancySelect觸發原始選擇框上的更改事件時,它看起來沒有任何影響。查看變體表單中使用的JavaScript,看起來他們已經在選擇框中取消了綁定更改事件並通過其他方式處理它,而不是觸發.variations_form上的事件。我似乎無法讓它工作。

我的代碼是沿着線的東西:

 $('.summary select').fancySelect().on('change.fs', function() { 
      $(this).trigger('change.$'); 
      $('.variations_form').trigger('woocommerce_variation_select_change'); 
     }); 

我試圖觸發多個事件,但沒有人可以有任何的影響。

任何想法? 謝謝。

+0

試試這個...在您的瀏覽器上檢查元素fancyselect。尋找select元素...當你檢查它時,使用開發工具調整css。使其可見..然後嘗試更改fancyselect的值..看看原來的選擇更改值... – Reigel

+0

是的它確實改變了選擇值,但它不會觸發變化的變化。但是,如果我然後手動更改實際的選擇字段,它的確如此。所以我認爲改變select(也許是點擊)會觸發別的東西,比如'.variations_form'。 – evu

+0

嘗試觸發點擊... – Reigel

回答

1

所以事實證明,原來的觸發器沒有工作,原因我不能解決。但是,手動觸發原始選擇框上的更改事件在某種程度上起作用,但不會更新fancySelect的「觸發器」元素。我認爲這是因爲原始選擇的選項沒有得到:selected屬性(無論出於何種原因)。我不得不添加一個自定義事件fancySelect手動觸發它的updateText()方法。

更新代碼:

$('.summary .options li').on('click', function(){ 
    $('.summary select').trigger('change').trigger('select.fs'); 
}); 

而對於fancySelect額外的事件(我會盡力促成,如果我得到機會):

sel.on('select.fs', function(){ 
    updateTriggerText(); 
}); 

乾杯。