防止重复函数onchange事件jQuery

Question

防止重复函数onchange事件jQuery

我下面有这个片段

$(document).ready(function(){
  $("#selectTest").change(function(e){
    if($(this).val() == "01"){
      $(".show").hide();
    }else{
      $(".show").show();
    };
  })
})

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="show">
        Sample Text
    </div>
    <select name="test" id="selectTest">
        <option value="00"></option>
        <option value="01">Click this to hide text</option>
        <option value="02">Click this to show text</option>
    </select>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

上面的代码片段看起来不错，但是当页面加载时从第一个选项中选择该选项时，我遇到了麻烦。我必须单击其他按钮才能使该hide功能正常工作。我通过if ... else在代码中添加来解决该问题，以便在页面加载时hide函数将正常运行。

$(document).ready(function(){
  $("#selectTest").change(function(e){
    if($(this).val() == "01"){
      $(".show").hide();
    }else{
      $(".show").show();
    };
  })

   if($("#selectTest").val() == "01"){
      $(".show").hide();
    }else{
      $(".show").show();
    };
})

Run Code Online (Sandbox Code Playgroud)

上面的代码似乎不合适，因为我必须重复做的功能，有没有更好的方法来解决此问题？

Answer 1

Mam*_*mun 7

无需编写两次代码，您可以使用jQuery 触发事件（change）.trigger()：

$("#selectTest").trigger('change');

Run Code Online (Sandbox Code Playgroud)

工作代码示例：

$("#selectTest").trigger('change');

Run Code Online (Sandbox Code Playgroud)

$(document).ready(function(){
  $("#selectTest").change(function(e){
    if($(this).val() == "01"){
      $(".show").hide();
    }else{
      $(".show").show();
    };
  });
 $("#selectTest").trigger('change');
})

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，8 月前
查看次数：	89 次
最近记录：	6 年，8 月前