jQuery自定义插件-AddClass问题

Question

我正在尝试创建一个自定义JQuery插件，当单击锚元素时，它将显示一个适当的DIV块。 现在，我将插件称为“ Content Slider”。

我设法创建了插件并使它工作，以便在单击锚元素时显示适当的相应DIV。 但是，我还希望将CSS类应用于锚元素，以便在单击它后将其突出显示。

有关HTML和JQuery插件代码，请参见下文：

HTML：

<div id="left">
    <a class="contentSliderTitle">Anchor 1</a>
    <a class="contentSliderTitle">Anchor 2</a>
    <a class="contentSliderTitle">Anchor 3</a>
</div>

<div id="right">
    <div class="contentSliderContent">DIV 1</div>
    <div class="contentSliderContent">DIV 2</div>
    <div class="contentSliderContent">DIV 3</div>
</div>

jQuery插件：

   (function(){ 
    $.fn.contentSlider = function () {
        addClickHandlersToTitleElements();
        showContentDiv(0);
    }

    function addClickHandlersToTitleElements() {
        $("a[class=contentSliderTitle]").click(function () {
            showContentDiv($("a[class=contentSliderTitle]").index(this));
            return false;
        });
    }

    function showContentDiv(titleIndex) {
        $("div[class=contentSliderContent]").each(function () {
            $("div[class=contentSliderContent]").hide();
            return false;
        });

        $("div[class=contentSliderContent]").eq(titleIndex).show();
    }
})(jQuery);

我尝试将代码添加到“ showContentDiv”私有函数中，以从所有等于“ contentSliderTitle”的锚标签中删除指定的类（名为contentSliderTitleSelected），并将“ contentSliderTitleSelected”类添加到单击的锚但这会停止“ showContentDiv”功能中的功能完全起作用，这意味着单击锚点时，显示的DIV不会更改。

我非常感谢您提供的帮助，因为这是我第一次尝试编写JQuery插件，而我对此感到非常沮丧！

非常感谢

Answer 1

蒂姆，您的函数应如下所示：

function addClickHandlersToTitleElements() {
    $("a[class=contentSliderTitle]").click(function () {
        showContentDiv($("a[class=contentSliderTitle]").index(this));
        $("a.contentSliderTitle").removeClass("contentSliderTitleSelected");
        $(this).addClass("contentSliderTitleSelected");
        return false;
    });
}

希望这能解决您的问题！

Answer 2

编写插件的目的是，您可以在同一页面上创建任意数量的插件实例。 您的页面只能在页面上运行一次。 尝试这样的事情。

<dl class="contentSlider">
    <div id="left">
        <dt>Anchor 1</dt>
        <dt>Anchor 2</dt>
        <dt>Anchor 3</dt>
    </div>
    <div id="right">
        <dd>Content 1</dd>
        <dd>Content 2</dd>
        <dd>Content 3</dd>
    </div>
</dl>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

使用Javascript：

(function(){ 
    $.fn.contentSlider = function () {
        // Loop through each root element
        this.each(function() {
            // Save current element for later use
            var $root = $(this);
            $root
                .find("dt") // Find all titles
                .click(function() {
                    $(this)
                      .addClass("highlighted") // Add class to clicked element
                      .siblings("dt").removeClass("highlighted"); // Remove class from sibling elements
                    // Hide all descriptions under "root"
                    $root.find("dd").hide();
                    // Show only description on same index as title
                    $root.find("dd").eq($(this).index()).show();
                })
                .slice(0,1).click(); // Call "click" function on first "dt" element
        });
        return this; // return root element to enable function chaining
    }
})(jQuery);

$(".contentSlider").contentSlider(); // Run the function on all elements with the class "contentSlider"
​

小提琴： http://jsfiddle.net/Qh9U6/3/