2

既存の woocommerce wordpress 拡張機能を構築しており、製品バリエーション (サイズ、色など) のドロップダウン メニューをラジオ ボックスに変換しています。注意が必要なのは、ユーザーがドロップダウン リストからオプションを選択すると、ajax を介して製品の在庫と価格を自動的に更新する何かがトリガーされることです。

これを使用して、入力を無線に変換しました（ここから）：

$('.variations select').each(function(i, select){
    var $select = jQuery(select);
    $select.find('option').each(function(j, option){
        var $option = jQuery(option);
        // Create a radio:
        var $radio = jQuery('<input type="radio" />');
        // Set name and value:
        $radio.attr('name', $select.attr('name')).attr('value', $option.val());
        // Set checked if the option was selected
        if ($option.attr('selected')) $radio.attr('checked', 'checked');
        // Insert radio before select box:
        $select.before($radio);
        $radio.wrap('<div class="vari-option fix" />');
        // Insert a label:
        $radio.before(
          $("<label />").attr('for', $select.attr('name')).text($option.text())
        );
    });

それから私はこれを使いました

$(':radio').click(function(){
   $(this).parent().parent().find('label').removeClass('checked');
   $(this).siblings('label').addClass('checked');
   $choice = $(this).attr('value');
   $('.variations select option[value=' + $choice + ']').attr('selected',true);
});

ラジオが選択されると、ドロップダウン オプションのイベントがミラーリングされます。これは正常に機能しますが、製品情報の更新をトリガーしていません。私の推測では、ドロップダウン オプションの「選択済み」属性を変更することと、同じオプションを物理的にクリックすることには違いがあると思います。私が考慮していないそのajax関数をトリガーしている可能性のあるイベントについて何か推測はありますか? 理想的には woocommerce の元のコードを変更する必要のない解決策はありますか? select オプションで .click() を使用してみましたが、違いはありませんでした。

4

1 に答える 1

3

要素の値をプログラムで変更してもchangeイベントはトリガーされません。プログラムでselected属性/プロパティを設定しても、含まれる要素<option>でイベントはトリガーされないと思います。change<select>

幸いなことに、jQuery を使用してプログラムでそのイベントを簡単にトリガーできます。

$('.variations select option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');

この呼び出しは、要素.parent()を含む jQuery オブジェクトを返し、そのオブジェクトのイベントにバインドされたイベント ハンドラーをトリガーします。<select>.trigger('change')change

于 2012-08-05T20:01:34.850 に答える