Question

我正在尝试创建一个自定义JQuery插件，当单击一个锚元素时，它会显示一个合适的DIV块。现在，我正在调用插件“内容滑块”。

我已经设法创建插件并使其工作，以便在单击锚元素时，显示相应的相应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/

JQuery Custom Plugin - AddClass问题

2 个答案: