Question

我有2个选择下拉菜单。我想在从两个菜单中选择一个选项后添加一个类。

    $('#size').change(function(){ 
        if ($(this).val() > 0 )  {
              $('#pizza').addClass('pizzaImage');
         }  

    });

    $('#crust').change(function(){ 
        if ($(this).val() > 0 ) {
              $('#pizza').addClass('pizzaImage');
         }  


    });

到目前为止，这是我的代码，当我从一个选项中选择一个选项时，它可以正常工作。基本上我想把这些放在一起我只是不知道这样做的语法。我也尝试了这个但没有结果。

var size = $('#size')
var crust = $('#crust')

function image () {
  if ((crust).val > 0 && (size).val > 0) {
    $('#pizza').addClass('pizzaImage');
  }
}

Answer 1

var $selects = $('#size, #crust');
$selects.change(function(){
   var bothSelected = this.value && $selects.not(this).val();
   $("#pizza").toggleClass("pizzaImage", bothSelected);
});

Answer 2

我首先在两者之间添加一个公共类，以便更容易将函数同时绑定到两个select元素。也许像pizzaOptions这样的东西。然后，你可以这样做：

$(".pizzaOptions").on("change", function(){
    var sizeSelected = $("#size").val() !== ""; 
    var crustSelected = $("#crust").val() !== ""; 

   if(sizeSelected && crustSelected){
        $('#pizza').addClass('pizzaImage');
   }
});

Jquery从选择下拉列表运行代码中选择了两个选项

2 个答案: