我正在尝试使用一个按钮并根据其当前状态使字符串删除字段隐藏和显示。最初，它将被隐藏(使用隐藏的 HTML 属性)，单击按钮时它应该出现，再次单击它应该消失。下面的代码我错了什么？
$(document).ready(function () {
$(".addlink_manage").click(function () {
console.log('click working');
//var toggle_x = $(".remove_field")
if ($(".remove_field").is(":hidden")) {
$(".remove_field").is(":visible");
}
if ($(".remove_field").is(":visible")) {
$(".remove_field").is(":hidden");
}
});
});<!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>
</head>
<body>
<div class="addlink_dynlist"><li><a href="#">Name</a> <a href="#" class="remove_field" hidden> remove field</a></li></div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<button class = "addlink_manage"> click me</button>
</body>
</html>最佳答案
此 $(".remove_field").is(":visible"); 仅返回 bool 值，而不是实际隐藏/显示该元素。
只需对当前 Prop 执行否定 hidden
$removeField.prop('hidden', !$removeField.is(":hidden"));
$(document).ready(function() {
$(".addlink_manage").click(function() {
console.log('click working');
var $removeField = $(".remove_field");
$removeField.prop('hidden', !$removeField.is(":hidden"));
});
});<!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>
</head>
<body>
<div class="addlink_dynlist">
<li><a href="#">Name</a> <a href="#" class="remove_field" hidden> remove field</a></li>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<button class="addlink_manage"> click me</button>
</body>
</html>关于javascript - jQuery - 是 :visible/hidden not working?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49184036/