0

jQueryの知識が不足しているため、少し行き詰まっています。助けていただければ幸いです。拡張コンテンツ領域をアクティブにする次のスクリプトがあります。

$(document).ready(function(){
    $("a.moreExpand").click(function(){
       var myelement = $(this).attr("rel");
        $(myelement).slideToggle(function() {
            $("a.moreExpand").text(
              $(this).is(':visible') ? "LESS -" : "MORE +"
            );
          });
    });
});

私の HTML (ページのさまざまな場所で使用):

<div class="moreExpandWrapp">
    <a href="javascript:void(0)" rel="#aboutExpand" class="moreExpand">MORE <span class="plus">+</span></a>
    <div class="moreExpandContent" id="aboutExpand">
        Lorem ipsum dolor sit amet ...
    </div>
</div>

これまでのところは問題ありませんが、コンテンツ領域を拡大/縮小すると、Web サイト上のすべてのテキスト (MORE/LESS テキスト) が変更されます。私は次のようにスクリプトをターゲットにしようとしました:

$(document).ready(function(){
    $("a.moreExpand").click(function(){
       var myelement = $(this).attr("rel");
        $(myelement).slideToggle(function() {
            $("a.moreExpand", this).text(
              $(this).is(':visible') ? "LESS -" : "MORE +"
            );
          });
    });
});

つまり $("a.moreExpand", this).text( 、もちろんこれは役に立たず、リンク テキストの代わりに展開されたコンテンツ テキストを置き換えます。私が理解している限り、これは「$this」値が基本的にボタンではなくトグル領域全体であるためです。

展開する div の代わりにリンク コピーをターゲットにしたいのですが、この場合に "$this" を使用する方法がわかりません (代わりに関数の最初の部分をターゲットにするため)。

これについてのご意見をお待ちしております。

ありがとうございました！

4

1 に答える 1

1

実際、 JavaScript のthisは現在のスコープを参照します。

slideToggle コールバック内では、スコープは「スライド」要素を参照するため、この=== myElement. 別の変数を使用して最初のリンクを保持する必要があります。

http://jsfiddle.net/t4CQt/

$("a.moreExpand").click(function(){
    var myLink = this,
        myelement = $(this).attr("rel");
    $(myelement).slideToggle('normal', function() {
        $(myLink).text(
            $(this).is(':visible') ? "MORE +" : "LESS -"
        );
    });
});
于 2013-04-17T10:02:19.823 に答える