为什么这个 jQuery 脚本不起作用？答案

【问题标题】：Why isn't this jQuery script working?为什么这个 jQuery 脚本不起作用？
【发布时间】：2011-12-08 17:41:50
【问题描述】：

<script type="text/javascript">
$(document).ready(function(){
  $("tr.reqDet").hide(); 

  $("[title='requestType']").change(function(){
    if ($("[title='requestType']").val()!=""){
        $("#reqDet").hide();
    } else {  
        $("#reqDet").show();  
    }
  });

</script>

我无法让脚本中的 if 语句工作...

详细信息：我正在使用 SharePoint，它会呈现一个带有属性 title="requestType" 的下拉框。当 requestType 框未设置为初始值“”时，我希望出现一个具有“reqDet”类的控件。

无论如何，谢谢大家。这是对我有用的解决方案：

<script type="text/javascript">
$(document).ready(function(){
  $("tr.reqDet").hide(); 

  $("select[title='requestType']").change(function(){
        $(".reqDet").toggle($(this).val()!== "");
  });
 });
</script>

【问题讨论】：

“不能让它工作”到底是怎么回事？
你能显示标记吗？
下拉框是什么元素（标题为requestType）？
您是否使用过 Firebug 来查看有多少元素与您的 $("[title='requestType']") 选择器匹配？如果是这样，您可能希望将该代码更改为 $(this).val()!="" 而不是 $("[title='requestType']").val()!=""
请包含html代码。

标签： jquery

【解决方案1】：

更新答案：由于您提到“类reqDet 的元素”，问题是您使用的是id 选择器（#reqDet）而不是类选择器@987654325 @。

此外，除此之外，您还可以对代码进行一些改进：

使您的选择器更加明确，这样它就不必检查页面中的每个元素
在回调中利用 this，这样您就不必再次遍历 DOM
使用toggle 代替hide 和show，使您失去if

所以你可以把它简化为：

$("select[title='requestType']").change(function(){ 
   $(".reqDet").toggle($(this).val() == ""); 
});

【讨论】：

我发现切换不起作用，因为请求类型有四个选项，四个中的三个应该显示 .reqDet 窗格。
@jg100309: toggle 如果您调整括号内的表达式，就可以正常工作。但是，如果您不将具体信息作为问题的一部分发布，那么真的很难提供帮助。
我有 $("select[title='requestType']").change(function(){ $(.reqDet").toggle($(this).val()! == ""); //if ($(this).val()!== "") { // $(.reqDet").show(); //} else { // $(.reqDet" ).hide(); //}); });
$("select[title='requestType']").change(function(){ $(.reqDet").toggle($(this).val()!== "" );
@jg100309: Edit your question 而不是张贴 cmets，无法理解 cmets 中的代码。

【解决方案2】：

$(document.ready(function() {
    var details = $('tr#reqDet');
    var dropdown = $("select[title='requestType']");
    details.hide();

    dropdown.change(function() {
        details.toggle(dropdown.val() === '');
    });
});

【讨论】：

【解决方案3】：

在添加更改事件的侦听器之前，是否有意隐藏类名 reqDet 的 tr，然后尝试隐藏 ID 为 reqDet 的元素？您还应该指定哪种类型的元素具有请求类型的标题：

<script type="text/javascript">
$(document).ready(function(){
  $("tr.reqDet").hide(); 

  $("select[title='requestType']").change(function(){
    if ($(this).val()!=""){
        $(".reqDet").hide();// should this be a class or id of reqDet 
    } else {  
        $(".reqDet").show();  // Change to "." to select class. # is selecting id so it isn't finding it. 
    }
  });

</script>

【讨论】：

是的，在用户输入请求类型之前将隐藏详细信息行。四个选项，其中三个选项应该显示.reqDetails

【解决方案4】：

$(文档).ready(函数(){ $("tr.reqDet").hide(); $("select[title='requestType']").change(function(){ if ($("[title='requestType']").val()!=""){ $("#reqDet").hide(); } 别的 { $("#reqDet").show(); } });

【讨论】：

【解决方案5】：

我认为 if 语句工作正常，但其中的选择器是错误的。正如您提到的要显示/隐藏的控件具有类reqDet，请使用类选择器。试试这个。

$(document).ready(function(){
   $("tr.reqDet").hide(); 

   $("[title='requestType']").change(function(){
      if ($(this).val()){
          $(".reqDet").hide();
      } else {  
          $(".reqDet").show();  
      }
   });
});

【讨论】：

@jg100309 - 问题在于您用于显示/隐藏选择器的#reqDet 选择器。您应该使用.reqDet，因为它是应用于您正在尝试显示/隐藏的控件的类。