Nivo-slider:向nivo-caption div添加额外的类

Question

在html中，我会有类似这样的内容。

<div id="1" class="nivo-html-caption extraclass1">

一旦它被展示出来，它仍然会做这个

<div class="nivo-caption" style="opacity: 0.8;">

它没有将我的类推到nivo-caption div，但我需要添加extraclass1，有什么方法可以做到这一点吗？我需要为每个nivo-caption div添加一个不同的类。

Answer 1

您可以将标题嵌套在#htmlcaption div中的另一个div中，而不是使用jQuery来添加类：

<div id="htmlcaption" class="nivo-html-caption extraclass1">

    <div class="extraclass1">

        <em>HTML</em> caption

    </div>

</div>

这就是我无论如何都会做的。

Answer 2

实际上只有一个<div class="nivo-caption">，其中的内容被替换为每个图像标题(如果存在)，所以每个图像交换类并不是一件小事。然而，…一种方法是在放映下一张幻灯片之前使用beforeChange()回调将CSS类复制到标题中。

我在本地有这个工作，它应该给你足够的继续下去。但是，因为类在图像之前交换，所以图像和类交换的时间并不完全同步。此外，您可能还希望在afterLoad()中使用正确的额外CSS来初始化标题。

下面的代码使用来自Nivo slider demo的图像，并需要jQuery (我使用的是v1.6.2)，以及下面的Nivo JavaScript和CSS才能正常工作。

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

JavaScript：

$('#slider').nivoSlider({
    beforeChange: function(){
        var nivoVars = $('#slider').data('nivo:vars');
        var currentImage = nivoVars.currentImage;
        var htmlCaptionForCurrentImage = $(currentImage.attr('title'));
        var classList = htmlCaptionForCurrentImage.attr('class').split(/\s+/);
        var extraClass = classList[classList.length-1]; // assumes your extra class is always the last one (so may need a "starts with" test here as well if it is not)    

        $('.nivo-caption').removeClass(function(index, classes) {
            return (classes.match(/extraclass\d/) || []).join(' '); // assumes your classes are extraclass1, extraclass2, etc. so again may need changing to match your actual classes
        }).addClass(extraClass);
    }
});

HTML：

<div id="slider">
    <img src="toystory.jpg" id="image1" alt="" title="#htmlcaption" />
    <img src="walle.jpg" id="image2" alt="" title="#htmlcaption2" />
</div>
<div id="htmlcaption" class="nivo-html-caption extraclass1">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
<div id="htmlcaption2" class="nivo-html-caption extraclass2">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

和CSS：

#slider {
    width:618px;
    height:246px;
}
.extraclass1 {
    color:red !important;
}
.extraclass2 {
    color:lightblue !important;
}

构建此答案时使用的参考文献

• Get class list for element with jQuery
• JQuery removeClass wildcard

Answer 3

尝试addClass()或css() mebbe