Question

我对jQuery很陌生，我尝试不使用jQuery的切换功能就创建了一个显示/隐藏切换按钮，而且我无法弄清楚下面的代码出了什么问题。

“隐藏”按钮可成功隐藏段落。隐藏部分正在工作。它添加了“显示”类，并删除了“隐藏”类，并更改了按钮的文本。我使用开发工具来查看此内容，并且该部分正常工作，但是再次单击按钮即显示部分无效。

$(document).ready(function() {
  $(".hide").click(function() {
    $(".content").hide();
    $(this).addClass("show");
    $(this).removeClass("hide");
    $(this).text("Show");
  });
  $(".show").click(function() {
    $(".content").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>

Answer 1

您可以使用toggle()通过单个按钮轻松切换元素的可见状态。然后，您可以为text()提供一个函数，以根据按钮的当前值设置按钮上的文本。试试这个：

$(document).ready(function() {
  $(".toggle").click(function() {
    $(".content").toggle();
    $(this).text(function(i, t) {
      return t == 'Show' ? 'Hide' : 'Show';
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>

如果您想在没有toggle()的情况下执行此操作，则可以使用toggleClass()来切换hide类的状态，如下所示：

$(document).ready(function() {
  $(".toggle").click(function() {
    $(".content").toggleClass('hide');
    $(this).text(function(i, t) {
      return t == 'Show' ? 'Hide' : 'Show';
    })
  });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>

Answer 2

您不想更改类-如果需要，则需要委派，以便将事件注册到文档之类的静态容器中

$(document).on("click",".hide",function() {

我建议改为：

$(document).ready(function() {
  $(".but").on("click",function() {
    $(".content").toggle();
    $(this).text($(this).text()=="Show"?"Hide":"Show");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="but">Hide</button>

无切换

$(document).ready(function() {
  $(document).on("click",".hide",function() {
    $(".content").hide();
    $(this).text("Show")
      .removeClass("hide")
      .addClass("show");
  });
  $(document).on("click",".show",function() {
    $(".content").show();
    $(this).text("Hide")
      .removeClass("show")
      .addClass("hide");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>

Answer 3

只有在首次创建DOM时构建添加到其中的元素时，click事件才起作用。一旦将按钮的类名从“显示”更改为“隐藏”，就会从基于事件的意义上将其“从DOM中删除”。

要在更改按钮的类名后触发按钮单击事件，必须使用on（）函数分配单击事件，并且该函数必须放置在将触发事件的元素的父容器上。在下面的示例中，我向文档对象添加了on（）方法，因此文档中所有具有.hide或.show类的元素都将继承这些click事件。这还将适用于您即时创建的任何新元素。

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script>
    $(document).on('click', ".show", function(){
        $(".content").show();
        $(this).addClass("hide");
        $(this).removeClass("show");
        $(this).text("Hide");
    });
    $(document).on('click', ".hide", function(){
        $(".content").hide();
        $(this).addClass("show");
        $(this).removeClass("hide");
        $(this).text("Show");
    });
</script>

您还应该使用@mplungjan建议的toggleClass（）方法。

这是on（）函数https://api.jquery.com/on/

的jQuery文档

Answer 4

$("#show-hide").toggle(function() {
  $(".content").hide();
  $(this).text("Show");
}, function() {
  $(".content").show();
  $(this).text("Hide");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button id="show-hide">Hide</button>

显示/隐藏切换按钮无法正常工作

4 个答案: