1

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

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

这段代码几乎可以工作。它将我的 HTML 附加到activeSlide加载中，但是当我将鼠标悬停在下一个列表项上时，没有任何变化。在小提琴中，即使幻灯片发生变化，您也会看到带有黑色背景的“Title 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();
        }
    }
});
4

2 回答 2

1

Wrapping your check/append in .hover() functions will make it occur when there's mousein/mouseout:

$("#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();
        }
    }
 );
于 2013-06-12T18:20:21.457 回答
1

As pointed out by @bbird, your if-statements execute only one.

Perhaps you can use the onPagerEvent callback to add and remove the <a> tag to the active list item.

First add the following function:

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();
        }
    });
}

Then call it once at the start:

activateItem(0);

And in the onPagerEvent callback:

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

jsfiddle demo

Edit: Updated the if-statement in the activateItem() function so the <a> element is appended to the list item's content, rather than replaces it.

于 2013-06-12T18:28:40.733 回答