Question

典型的菜鸟问题。 :-) 我看了一下这里提出的一些类似的问题，解决方案对我来说太复杂了。或者他们没有真正的工作？无论如何，当选择的选项是USA / notUSA时，此代码执行的操作是隐藏/显示省输入。默认选择是值为United States的选项。为了使它与其他选项不同，我为其分配了一个class = us和class = notus给其他人。

  function showhideProvinceInput(){
     if($("#countries option[class='notus']")){
      $('#provincelabel').fadeIn("slow");
      $('#provinceinput').fadeIn("slow");
     }
     if($("#countries option[class='us']")) {
      $('#provincelabel').fadeOut(0);
      $('#provinceinput').fadeOut(0);
     }
    }

    $(document).ready(function(){ 
        $('#countries').change(function() {
            showhideProvinceInput();
       });
   });

部分有效，至少在“show”案例中如此。部分是因为输入显示然后隐藏在1秒左右。我没有尝试隐藏它，因为显示它还没有完全发挥作用。 :-)任何帮助？

Answer 1

我认为你错过了选择器的一部分 - 你想检查所选的选项是否具有notus类：

function showhideProvinceInput(){
     if($("#countries option:selected").hasClass("notUs")){
      $('#provincelabel').fadeIn("slow");
      $('#provinceinput').fadeIn("slow");
     }
     else {
      $('#provincelabel').fadeOut(0);
      $('#provinceinput').fadeOut(0);
     }
    }

Answer 2

如果你正在使用类，你的函数看起来应该是这样的：

function showhideProvinceInput(){
 if($("#countries option.notus:selected").length){
  $('#provincelabel, #provinceinput').fadeIn("slow");
 }
 else {
  $('#provincelabel, #provinceinput').hide();
 }
}

$(function(){ 
  $('#countries').change(showhideProvinceInput);
});

此处的主要更改是您可以使用.class selector，并使用:selected仅查找选定的<option>，然后使用.length查看该选择器是否已找到任何物品。您也可以合并后面的选择器，并使用.hide()作为即时.fadeOut(0)。

如果您正在调用此处理程序，也不需要匿名函数：）

在选择更改时隐藏/显示其他输入元素？

2 个答案: