1

アンカー要素がクリックされたときに適切な DIV ブロックを表示するカスタム JQuery プラグインを作成しようとしています。今のところ、プラグインを「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プラグインを作成しようとしたのは初めてで、完全に困惑しているため、これについての助けに非常に感謝しています!!

どうもありがとう

4

2 に答える 2

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 に答える
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 に答える