最佳实践(jQuery,CSS):如何初始化将切换可见的隐藏元素？

Question

Stack警告我这是一个主观问题,可能会很接近,但无论如何我都会尝试这个.

我有一组控制按钮附加到图库中的图片.这些最初是隐藏的,当鼠标悬停在图像上时切换可见.我的问题是:

这些按钮是应该设置为隐藏在样式表中还是保持可见,并在加载时被jQuery隐藏？我想要优雅的降级,所以如果我希望这些在未启用javascript时可见,那么在CSS中初始化这个似乎是一个坏主意.

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

那么这样的事情最好的做法是什么？看起来这样做有很多优点和缺点(css与document.ready),如果它们被默认的CSS隐藏,按钮将使用ajax分页进行精确切换.但是如果没有启用javascript,按钮的功能将会丢失.有没有人有这方面的建议？

注意:我最初没有提到它,但它很重要.我目前正在fadeToggle()用来完成我的过渡,这可能是整个问题的复杂化.到目前为止,所有解决方案似乎都有效,但在引入衰落时并非如此.

Answer 1

如果你试图改变通过Ajax加载的元素的样式,那就像你试图击中移动的目标一样.我会在样式表中创建两个声明 - 一个用于隐藏,一个用于可见 - 然后根据附加到body标签的类(或任何其他包含标签)切换它们.

像这样:

body .mybutton {
  display:block;
}

body.loaded .mybutton {
  display:none;
}

然后在你的JS文件中:

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

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