1

我正在尝试创建一个自定义 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”私有函数添加代码，以从所有锚标记中删除指定的类（名为 contentSliderTitleSelected），该类等于“contentSliderTitle”，并将“contentSliderTitleSelected”类添加到单击的锚点但这会停止“showContentDiv”函数中的功能完全工作，这意味着当单击锚点时，显示的 DIV 不会改变。

我将非常感谢您的帮助，因为这是我第一次尝试编写 JQuery 插件，我完全被难住了！

非常感谢

4

2 回答 2

0

蒂姆，你的功能应该是这样的：

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

希望这能解决您的问题！

于 2012-10-13T17:53:01.127 回答
0

编写插件的目的是您可以在同一页面上创建任意数量的插件实例。你的只会在一个页面上工作一次。试试这样的东西。

<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"
​

小提琴：<a href="http://jsfiddle.net/Qh9U6/3/" rel="nofollow">http://jsfiddle.net/Qh9U6/3/

于 2012-10-13T18:26:46.507 回答