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

所以你希望select的值是另一个的类，试试这个

jQuery(document).ready(function() 
		{
			function removeExistingClass()
			{
				jQuery('.value #pa_mount-colour option').each(function(){
					jQuery('.woocommerce-product-gallery__image').removeClass($(this).val());
				});
			}

			jQuery('.value #pa_mount-colour').change(function() 
			{
			    var jQueryval = jQuery(this).val();
			    removeExistingClass();
			    // this will remove if any prevous class added from the selects value
			    jQuery('.woocommerce-product-gallery__image').addClass(jQueryval);

			});
		});

.red{border:6px red solid;}   	
.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">
	  <select id="pa_mount-colour">
	  	<option value="red">Red</option>
	  	<option value="green">Green</option>
	  	<option value="blue">Blue</option>
	  </select>
   </div>

   <div class="woocommerce-product-gallery__image">Select will change my class</div>

Answer 3

jQuery(function ($) {

    function removeExistingClass(){
        $('#pa_mount-colour option').each(function(){
            $('.listings-sidebar-content').removeClass($(this).val());
        });
    }

    $('#pa_mount-colour').change(function() {
        var jQueryval = $(this).val();
        removeExistingClass();
        jQuery('.woocommerce-product-gallery__image').toggleClass(jQueryval);
    });

});

使用select选项作为另一个元素的类

3 个答案: