jquery - 使用 jquery 根据 img src 或 id 更改主体类

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>