最佳实践(jQuery，CSS):如何初始化将切换可见状态的隐藏元素? [英] Best Practice (jQuery, CSS): How to initialize hidden elements that will toggle visible?

问题描述

Stack警告我这是一个主观的问题，可能会很接近，但是我还是要尝试一下.

Stack is warning me this is a subjective question, and will likely be close, but I'm going to try this anyway.

我在画廊中的图片上附加了一组控制按钮.这些将最初被隐藏，并且当鼠标悬停在图像上方时切换可见.我的问题是:

I have a set of control buttons attached to pictures in a gallery. These are to be initially hidden, and toggle visible when the mouse hovers over the image. The question I have is this:

这些按钮应该设置为隐藏在样式表中还是保持可见状态，并在加载时由jQuery隐藏?我希望正常降级，因此如果我希望在未启用javascript的情况下使这些消息可见，那么在CSS中初始化它似乎是一个坏主意.

Should these buttons be set to hidden in the stylesheet or stay visible and be hidden by jQuery when they load? I want graceful degradation, so it seems like initializing this in the CSS is a bad idea if I want these to be visible if javascript isn't enabled.

最重要的是，我正在使用Ajax加载这些图像的页面.如果我使用jQuery隐藏执行此操作，则它不会影响从ajax请求加载的内容，因为它仅在$(document).ready()上触发.我尝试使用live('ready')，但了解到live()不支持该事件.

On top of this, I'm using Ajax to load pages of these images. If I do this using the jQuery hide, it doesn't affect those that load from an ajax request, since it only triggers on $(document).ready(). I've tried using live('ready'), but learned that that event isn't supported in live().

那么，类似这样的最佳实践是什么?这两种方式似乎都有很多利弊(css与document.ready)，如果默认CSS隐藏了它们，则按钮可以通过ajax分页很好地切换.但是，如果未启用javascript，则按钮的功能将丢失.有人为此提供建议吗?

So what is the best practice for something like this? It seems like there's a lot of pros and cons for doing this either way (css vs. document.ready), and if they're hidden by the default CSS, the buttons will toggle fine with ajax pagination. But if javascript isn't enabled, the functionality of the buttons will be lost. Does anyone have advice for this?

注意:起初我没有提到它，但这很重要.我目前正在使用fadeToggle()完成转换，这可能会使整个问题变得复杂.到目前为止，所有解决方案似乎都可以使用，但引入衰落时并没有太大作用.

Note: I didn't mention it originally, but it is significant. I'm currently using fadeToggle() to accomplish my transition, which may be what's complicating this whole issue. The solutions so far all appear to work, but not so much when fading is introduced.

推荐答案

如果您要更改通过Ajax加载的元素的样式，则几乎就像您要尝试移动目标一样.我会在样式表中创建两个声明-一个声明为隐藏，一个声明为可见-，然后根据附加到body标签(或包含标签的任何其他标签)上的类切换它们.

If you're trying to change the style of elements loaded via Ajax, it's almost like you're trying to hit a moving target. I would create two declarations in my stylesheet - one for hidden, one for visible - and then toggle them based on a class attached to the body tag (or any other containing tag).

像这样:

body .mybutton {
  display:block;
}

body.loaded .mybutton {
  display:none;
}

然后在您的JS文件中:

Then in your JS file:

$(document).ready(function() {
  $('body').addClass('loaded');
});

这样，任何具有类名称mybutton的元素(当前和将来)都将应用适当的样式.

This way, any elements that have the class name mybutton - current and future - will have the appropriate style applied.

这篇关于最佳实践(jQuery，CSS):如何初始化将切换可见状态的隐藏元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！