Question

我正在使用此幻灯片： http://www.zurb.com/playground/orbit-jquery-image-slider 我想更改每张幻灯片的正文类，这样我就可以应用不同的背景颜色了。

我有这样的事情：

if($('#featured').find('img[src="/01.jpg"]')) {
    //alert('img exists');
    $('body').addClass('option_a');
} else if
    //alert('img dosnt exists');
    ($('#featured').find('img[src="/02.jpg"]')) {
    //alert('img exists');
    $('body').addClass('option_b');
} else {
    $('body').addClass('option_c');
}

但我的javascript仍然很差，所以我可以使用一些指导或替代方法。非常感谢:)）

Answer 1

我认为最好在图像的标签中存储有关样式的信息，这取决于图像。

这样，在向幻灯片添加新图片时，您无需更改JavaScript代码。

<div id="featured"> 
     <img src="overflow.jpg" alt="Overflow: Hidden No More" data-class="option-a" />
     <img src="captions.jpg"  alt="HTML Captions" data-class="option-b" />
     <img src="features.jpg" alt="and more features" data-class="option-c" />
</div>

<script>
$('#featured').orbit({afterSlideChange: function() {
    $('body').attr('class', $(this).data('class'));
}});
</script>

使用jquery基于img src或id更改body类

1 个答案: