selectオプションを別の要素のクラスとして使用する

Question

selectオプション値を別のフィールドのクラスとして渡すことを検討しています。

私はこれを手動で処理することができましたが、動的に言いたいので、実際のオプションを選択してその値をクラスとして使用します。 参照リンク： https://jsfiddle.net/tmtgxL0n/

jQuery(document).ready(function() { 
jQuery(".value").find('#pa_mount-colour').change(function() { 
    var jQueryval = jQuery(this).val(); 

    if(jQueryval === 'cream'){ 
     jQuery('.woocommerce-product-gallery__image').addClass("cream"); 
    }else{ 
     jQuery('.woocommerce-product-gallery__image').removeClass("cream"); 
    } 
}); 

}）;

誰かが私を正しい方向に向けることができるかどうかは不思議です。

Answer 1

あなたは既に動的に選択した値取得している：単純にそれを使用

var jQueryval = jQuery(this).val(); 

を：

jQuery('.woocommerce-product-gallery__image').toggleClass(jQueryval); 

は、ターゲット要素がすでにクラスを持っている場合、自動的にチェックしますtoggleClass()の使用を注意し、そのクラスを追加または削除します。

Answer 2

ですから、選択の値が別のクラスになりたい、 `この

jQuery(document).ready(function() 
 
\t \t { 
 
\t \t \t function removeExistingClass() 
 
\t \t \t { 
 
\t \t \t \t jQuery('.value #pa_mount-colour option').each(function(){ 
 
\t \t \t \t \t jQuery('.woocommerce-product-gallery__image').removeClass($(this).val()); 
 
\t \t \t \t }); 
 
\t \t \t } 
 

 
\t \t \t jQuery('.value #pa_mount-colour').change(function() 
 
\t \t \t { 
 
\t \t \t  var jQueryval = jQuery(this).val(); 
 
\t \t \t  removeExistingClass(); 
 
\t \t \t  // this will remove if any prevous class added from the selects value 
 
\t \t \t  jQuery('.woocommerce-product-gallery__image').addClass(jQueryval); 
 

 
\t \t \t }); 
 
\t \t });

.red{border:6px red solid;} \t 
 
.green{border:6px green solid;} 
 
.blue{border:6px blue solid;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="value"> 
 
\t <select id="pa_mount-colour"> 
 
\t \t <option value="red">Red</option> 
 
\t \t <option value="green">Green</option> 
 
\t \t <option value="blue">Blue</option> 
 
\t </select> 
 
    </div> 
 

 
    <div class="woocommerce-product-gallery__image">Select will change my class</div>