Question

我下面有这个代码段

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

<!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>

上面的代码片段看起来不错，但是当页面加载时从第一个选项中选择该选项时，我遇到了麻烦。我必须单击其他按钮才能使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();
    };
})

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

Answer 1

您可以使用jQuery的.trigger()来触发事件（ change ），而不必编写两次代码：

    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection"), x => x.MigrationsAssembly("<Your Project Assembly name where DBContext class resides>")));

工作代码示例：

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

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

防止重复函数onchange事件jQuery

1 个答案: