javascript .removeClass('visible').addClass('invisible'); 与 .hide() 或 .show()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24166305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
.removeClass('visible').addClass('invisible'); vs. .hide() or .show()
提问by ford prefect
I am an intern and I came across some code like the above in the title.
我是一名实习生，我在标题中遇到了一些类似上面的代码。
$(".someClass").removeClass('visible').addClass('invisible');
$(".someClass").removeClass('invisible').addClass('visible');
//there are css classes for this that set display to none etc.
It is buggy and I was charged with changing some UI stuff so I thought I would replace the above with .hide()and .show()correspondingly. The bugs have more or less disappeared. What are the advantages of one way over the other? In this case the latter appears to have worked better, so why would you implement it the first way?
它是越野车，我被指控改变一些东西的用户界面，所以我想我会取代以上.hide()和.show()相应。这些错误或多或少都消失了。一种方式比另一种方式有什么优势？在这种情况下，后者似乎效果更好，那么您为什么要采用第一种方式呢？
EDIT:
编辑：
I am just trying to show and hide page elements depending on what page options have been chosen. Which option is best practice?
我只是想根据选择的页面选项来显示和隐藏页面元素。哪个选项是最佳实践？
采纳答案by Stephan Robberts
$(selector).hide();
and
和
$(selector).show();
simply adds
简单地添加
style="display:none;"
and
和
style="display:block;"
respectively to the selector.
分别给选择器。
When you add and remove classes, you can add a myriad of styles and manage them in your style sheet.
添加和删除类时，您可以添加无数样式并在样式表中管理它们。
Personally, when I'm simply showing or hiding a selector via jQuery, I use
就个人而言，当我只是通过 jQuery 显示或隐藏选择器时，我使用
show();
hide();
or
或者
toggle();
回答by Andrei Cristian Prodan
.removeClass('visible').addClass('invisible'); - gives an element a class, that can have one or more properties, in this case it's probably display: none and display: block (or table, or.. something else, you can't know)
.removeClass('visible').addClass('invisible'); - 给一个元素一个类，它可以有一个或多个属性，在这种情况下，它可能是 display: none 和 display: block （或 table，或者......别的东西，你不知道）
.hide() and .show() - does not mess with the element's classes, it changes its style directly with display: none and display: block (or whatever type of visibility it had before)
.hide() 和 .show() - 不会弄乱元素的类，它直接使用 display: none 和 display: block （或它以前具有的任何类型的可见性）更改其样式
It depends on the situation which to use. You have more control when you add and remove classes though, but probably less performance.
这取决于使用哪种情况。虽然您在添加和删除类时有更多的控制权，但可能会降低性能。
EDIT: Holy Moly, the comment dude is right, I have been living in a lie. I wonder if I experienced a bug or something back in the day when I was 100% sure it did not restore its default visibility, but assign "block" to it by force.
编辑：Holy Moly，老兄的评论是对的，我一直生活在谎言中。我想知道在我 100% 确定它没有恢复其默认可见性，而是强制为其分配“阻止”的那天，我是否遇到了错误或其他事情。
jquery site says:
jquery 网站说：
This is roughly equivalent to calling .css( "display", "block"), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
这大致相当于调用 .css("display", "block")，只是 display 属性恢复到它最初的状态。如果一个元素的显示值为 inline，然后隐藏并显示，它将再次被内联显示。
回答by meagar
Generally hiding and showing elements via CSS is a good practice, but this is a bad way of going about it.
通常通过 CSS 隐藏和显示元素是一种很好的做法，但这是一种糟糕的做法。
If you're going to hide and show elements by toggling CSS classes, do so by toggling a semanticclass on the highest level element that makes sense. Move a single higher-level element between known states like .showing-postor .creating-comment, and let that trickle down to all its children elements, hiding some elements, resizing others, etc etc.
如果您要通过切换 CSS 类来隐藏和显示元素，请通过在有意义的最高级别元素上切换语义类来实现。在已知状态之间移动一个更高级别的元素，例如.showing-postor .creating-comment，然后让它渗透到它的所有子元素，隐藏一些元素，调整其他元素的大小等。
Don't add classes like invisibleor visibleto the elements themselves, that's drastically over-complicated and a reinvention of the already available .show()and .hide().
不要向元素本身添加类似invisible或 的类visible，这非常复杂，并且是对已经可用的.show()和.hide().
回答by yAnTar
Hide and show methods are using style inline code
隐藏和显示方法使用样式内联代码
style="display:block"
style="display:none"
And show method always add "display:block". If you need use for example display:inline-block - you should use your classes, if not - you can use show and hide.
并且显示方法总是添加“显示：块”。如果你需要使用例如 display:inline-block - 你应该使用你的类，如果不是 - 你可以使用 show 和 hide。
Also instead of combination show and hide you can use method toggle
也可以使用方法切换代替组合显示和隐藏
