Question

http://jsfiddle.net/ebbymac/pKZ9U/

这是使用jQuery Cycle插件...它正在做的是，当您将鼠标悬停在每个列表项上时，幻灯片会被更改，并且其相应的列表项会添加类activeSlide。我要做的是将HTML附加到带有activeSlide类的列表项，并在下一个列表项悬停时将其删除。

此代码几乎可以使用。它会在加载时将我的HTML附加到activeSlide，但是当我将鼠标悬停在下一个列表项上时，没有任何更改。在小提琴中，即使幻灯片发生变化，您也会看到黑色背景的“标题1”保持不变。

基本上，我想知道如何检查一个元素是否有一个类，如果有，请附加一些东西。如果该类不再适用，请删除附加的内容。

$(document).ready(function() {
    var titles = ["Title 1", "Title 2", "Title 3"];
    $("#slideshow").before("<ul id='slideshow-nav'></ul>")
    .cycle( {
        fx:                         "scrollVert",
        rev:                        "scrollVert",
        speed:                      600,
        timeout:                    0,
        pagerEvent:                 "mouseover", 
        pager:                      "#slideshow-nav",
        pagerAnchorBuilder: function (index) {
            return "<li>" + titles[index] + "</li>";
        }
    });
    if($("#slideshow-nav li").hasClass("activeSlide")) {
        var ind = $("#slideshow-nav li").index();
        $("#slideshow-nav li.activeSlide").append("<a href='#'>" + titles[ind] + "</a>");
    } else {
        if($("#slideshow-nav li:not(.activeSlide)")) {
            $("a").remove();
        }
    }
});

Answer 1

在.hover()函数中包含您的检查/附加内容会在鼠标滑动/鼠标移动时发生：

$("#slideshow-nav li").hover(
    function () {
        if ($(this).hasClass("activeSlide")) {
            var ind = $("#slideshow-nav li").index();
            $("#slideshow-nav li.activeSlide").append("<a href='#'>" + titles[ind] + "</a>");
        }
    }, 
    function () {
        if($("#slideshow-nav li:not(.activeSlide)")) {
            $("a").remove();
        }
    }
 );

Answer 2

正如@bbird指出的那样，你的if语句只执行一个。

也许您可以使用onPagerEvent回调在活动列表项中添加和删除<a>标记。

首先添加以下功能：

function activateItem(index) {
    $('#slideshow-nav').children('li').each(function (i) {
        var $item = $(this);
        if (i == index) {
            if ($item.children('a').length == 0) {
                $item.append('<a href="#">' + titles[i] + '</a>');
            }
        } else {
            $item.children('a').remove();
        }
    });
}

然后在开始时调用一次：

activateItem(0);

在onPagerEvent回调中：

    onPagerEvent: function (index) {
        activateItem(index);
    }

jsfiddle demo

编辑：更新了activateItem()函数中的if语句，因此<a>元素会附加到列表项的内容中，而不是替换它。

检查元素是否为hasClass（），如果没有，则删除子元素

2 个答案: