Question

我正在尝试使用一个按钮并根据其当前状态隐藏和显示字符串删除字段。最初，它将被隐藏（使用隐藏的HTML属性），点击它应该出现的按钮，再次点击它应该消失。我在下面的代码中错了什么？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

从我的评论中，$(".remove_field").is(":visible");返回一个布尔值，因此它不会做任何事情来添加和删除元素上的属性。

如果/需要

，请致电toggle()否

或使用.attr("hidden", true)和.removeAttr('hidden');

或使用.hide()和.show()

Answer 2

此$(".remove_field").is(":visible");仅返回一个布尔值，而不是实际隐藏/显示该元素。

只对当前道具hidden

执行否定

$removeField.prop('hidden', !$removeField.is(":hidden"));

＆＃13;

$(document).ready(function() {
  $(".addlink_manage").click(function() {
    console.log('click working');
    var $removeField = $(".remove_field");
    $removeField.prop('hidden', !$removeField.is(":hidden"));
  });
});

＆＃13;

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

＆＃13;

Answer 3

jQuery（）。is（“：visible / hidden”）认为元素可见/隐藏有几个原因：

他们的CSS显示值为none。
它们是type =“hidden”的表单元素。
他们的宽度和高度明确地设置为0.
隐藏了一个祖先元素，因此页面上不会显示该元素。

但是，如果使用jQuery().toggle

，则可以更轻松地隐藏/显示元素

jQuery - 是：可见/隐藏不起作用？

3 个答案: