gpt4 book ai didi

javascript - 防止重复函数 onchange 事件 jQuery

转载 作者:行者123 更新时间:2023-11-28 04:27:10 29 4
gpt4 key购买 nike

我在下面有这个片段

$(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 解决了这个问题,这样当页面加载时隐藏功能将正常运行。

$(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();
};
})

上面的代码看起来不合适,因为我必须重复我所做的功能,有没有更好的方法来解决这个问题?

最佳答案

无需编写两次代码,您可以使用 jQuery 的 .trigger() 触发事件(更改) :

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

工作代码示例:

$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
});
$("#selectTest").trigger('change');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

关于javascript - 防止重复函数 onchange 事件 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57534292/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com