Question

我的应用程序中有一个图像滑块小部件。我正在使用jquery循环..我有一个下拉菜单，我可以更改滑块的效果。但我需要在单个页面中的多个位置插入此图像滑块。而对于下拉菜单，我使用了id ..所以当我在一个页面中的多个页面中插入图像时，效果对所有人来说都是相同的（因为我已经使用了id）。所以我想给一个下拉菜单的类名。在那种情况下我将如何在jquery中分配效果值..请找到下面的代码..对此的任何想法将不胜感激。？/（我只是学习jquery和JS）。 Jquery代码：

var effects_id = document.getElementById('slideshow_effects').value;
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/></script><script type='text/javascript' src='/javascripts/jquery.cycle.all.min.js'/></script>

<script type='text/javascript'> 
$.noConflict();
jQuery(document).ready(function(){
    jQuery('.editor_slideshow').cycle({
            fx: '"+effects_id+"',
            speed: 1000,
            timeout: 2000
        });});
</script>

下拉菜单：

<select id="slideshow_effects">
<option value="fade">Fade</option>
<option value="fadeZoom">FadeZoom</option>
<option value="cover">Cover</option>
<option value="toss">Toss</option>
<option value="blindY">BlindY</option>
</select>

Answer 1

在这些情况下，我会采用以下结构：

<div class='slider'>
    <select class='drop' >...</select>
    <div class='slideshow'></div>
</div>

现在在js：

$(".slider").each(slider_init);

function slider_init(index, el)
{
    var drop = $(el).find(".drop");
    var slideshow = $(el).find(".slideshow");

    // now initialize slider here for drop and slideshow
    slideshow.cycle({
        fx: drop.val(),
        speed: 1000,
        timeout: 2000
    });});
}

实际上这样就可以单独初始化每个滑块，并且每次初始化时代码都会找到相关的select元素。

这种方式无论您在页面上有多少“滑块”，每个都会单独工作

图像在jquery中滑动

1 个答案: