Question

我是主页。页面内有5-6个动态生成的jquery滑块。对于前。

<div id="slider1" class="slider">
    // images here 
</div>

<div id="slider2" class="slider">
    // images here 
</div>
.......
.......

滑块插件在页面末尾加载所有滑块后应用，

$('#slider1').applyplugin();
$('#slider2').applyplugin();
.....
.....

现在的问题是：该插件是否应该在页面末尾同时应用于所有滑块 ;或者我应该如下所示逐一应用滑块，

<div id="slider1" class="slider">
...... images here .....
</div>
$('#slider1').applyplugin();

<div id="slider2" class="slider">
...... images here .....
</div>
$('#slider2').applyplugin();

哪些更好的用户体验会更好？还是有其他解决办法吗？

编辑：我错误地写了id=slider1，slider1, slider2 ...

Answer 1

您还没有真正解释过您尝试解决的问题＆＃34;更好的用户体验＆＃34;？例如，您是否更关注所有同时显示的滑块？在另一个滑块之前没有显示滑块？在滑块初始化之前没有显示HTML？等...

假设.applyplugin()被正确编写以一次处理多个元素，您可以使用以下方法简化您的javascript：

$("#slider1, #slider2").applyplugin();

或使用通用的类名：

$(".slider").applyplugin();

另外，我假设你的问题只是一个错字，因为你不能拥有两个ID相同的元素。

如果要确保元素在正确初始化之前根本不显示，您可以这样做：

<div id="slider1" class="slider" style="visibility: hidden;">
...... images here .....
</div>

<div id="slider2" class="slider" style="visibility: hidden;">
...... images here .....
</div>
$(".slider").css("visibility", "visible").applyplugin();

如果这并未解决您尝试做得更好的用户体验，请详细说明您尝试完成的工作。

javascript：一次性将插件应用于所有vs

1 个答案: