Question

我是实习生，我在标题中遇到了类似上面的代码。

$(".someClass").removeClass('visible').addClass('invisible');
$(".someClass").removeClass('invisible').addClass('visible');
//there are css classes for this that set display to none etc.

这是错误的，我负责更改一些UI内容，所以我认为我会相应地用.hide()和.show()替换上面的内容。这些错误或多或少都消失了。一种方式比另一种方式有什么优势？在这种情况下，后者看起来效果更好，那么为什么要以第一种方式实现呢？

编辑：

我只是尝试显示和隐藏页面元素，具体取决于所选的页面选项。哪种选择是最佳做法？

Answer 1

.removeClass（＆＃39;可见＆＃39）。addClass（＆＃39;不可见＆＃39）; - 给一个元素一个类，它可以有一个或多个属性，在这种情况下它可能显示：none和display：block（或table，或者......其他东西，你不能知道）< / p>

.hide（）和.show（） - 不会混淆元素的类，它会直接使用display：none和display：block（或之前的任何类型的可见性）来改变其样式

取决于使用的情况。添加和删除类时，您可以更好地控制，但可能性能较差。

编辑：圣洁的莫莉，评论家伙是对的，我一直生活在谎言中。我想知道当我100％确定它没有恢复其默认可见性时，我是否遇到了一个错误或某些东西，但是分配＆＃34;阻止＆＃34;通过武力来实现它。

jquery网站说：

这大致相当于调用.css（＆＃34; display＆＃34;，＆＃34; block＆＃34;），除了显示属性恢复到任何状态原来。如果元素的显示值为inline，则隐藏并显示，它将再次以内联方式显示。

Answer 2

 $(selector).hide();

和

 $(selector).show();

只需添加

 style="display:none;"

和

 style="display:block;"

分别到选择器。

添加和删除课程时，您可以添加无数样式并在样式表中进行管理。

就个人而言，当我通过jQuery显示或隐藏选择器时，我使用

 show();
 hide();

或

 toggle();

Answer 3

隐藏和显示方法正在使用样式内联代码

style="display:block"
style="display:none"

并且show方法总是添加＆＃34; display：block＆＃34;。如果你需要使用例如display：inline-block - 你应该使用你的类，如果没有 - 你可以使用show和hide。

除了组合显示和隐藏，您还可以使用方法toggle

Answer 4

通常通过CSS隐藏和显示元素是一种很好的做法，但这是一种不好的方法。

如果您要通过切换CSS类来隐藏和显示元素，请通过在有意义的最高级元素上切换语义类来实现。在已知状态（如.showing-post或.creating-comment）之间移动单个更高级别的元素，然后将其细化到其所有子元素，隐藏一些元素，调整其他元素等等。

不要将invisible或visible等类添加到元素本身，这会过度复杂化并重新发明已有的.show()和{ {1}}。

.removeClass（＆＃39;可见＆＃39）。addClass（＆＃39;不可见＆＃39）; vs. .hide（）或.show（）

编辑：

4 个答案: