2

jQuery を使用して単純な「トグル」のような関数を実行しようとしていますが、正しく動作させることができないようです。

次のような HTML ブロックがあります。

<li class="item-actions-follow">
    <a href="#" id="follow" class="icon small-icon circle_plus">
        <i></i>
            Follow
    </a>
</li>

ユーザーがリンク「Follow」をクリックして、タグのクラスcircle_plusをcircle_minusに変更し、テキストFollowをUnfollowに、またはその逆に変更したいと思います。href

私はいくつかの異なることを試しましたが、それらはすべて近づいていますが、私が望むものとはまったく異なります.

jQueryイベント「onclick」内でこれを行います：

var text = $("a#follow").text() == 'Follow' ? 'Unfollow' : 'Follow';
$("a#follow").text(text);

これにより、「フォロー」というテキストが「フォロー解除」に変更されましたが、リンクを再度クリックしても元に戻りませんでした。また、基本的にcircle_plusクラス<i></i>によって提供されるアイコンを表示するためのタグが削除されました。

また、次のように、純粋なトグルを実行しようとしました（トグル機能はテキストではなくプロパティでのみ機能することが後でわかりました）。

$("a#follow").toggle
function() {
$("a#follow").text("Unfollow");
$(this).removeClass('circle_plus').addClass('circle_minus').stop();
      },
      function() {
        $("a#follow").text("Follow");
        $(this).removeClass('circle_minus').addClass('circle_plus').stop();
      });

これを実行してリンクをクリックすると、テキストとアイコンが一緒に「フェードアウト」するだけで、クラスは変更されません。

私もその.toggleClass()機能を試しましたが、うまくいきませんでした。

私はjQueryに比較的慣れていないので、簡単な作業かもしれませんが、解決策を広く探しましたが、これまでのところ運がありません.

私を正しい方向に向けるのを手伝ってくれることを願っています。

4

4 に答える 4

0

これをクリック関数ハンドラでラップしていますか? このフィドルの動作を見てください

http://jsfiddle.net/qq8f3/5/

HTML

<a href="#" id="follow">Follow</a>

CSS

#follow.circle_plus{background-color:red;}

JS

$("a#follow").click(function(){
var link = $("a#follow");
var text = link.text() == 'Follow' ? 'Unfollow' : 'Follow';
link.text(text);
link.toggleClass('circle_plus');
return false;});
于 2013-05-22T08:11:24.370 に答える
-1

または、このようなことを行うことで、「オーバーヘッド」を削減できますjs(ごくわずかですが)。ご覧のとおり、マークアップを少し変更しました。

HTML:

<li class="item-actions-follow"> <a href="#" id="follow" class="icon small-icon">
        <span class="circle_plus">
            <i></i>
            Follow
        </span>
        <span class="circle_minus">
            <i></i>
            UnFollow
        </span>
    </a>    
</li>

JS/jQuery

$("a#follow").click(function(){
    $(this).children("span").toggle();
});

リンクのテスト

于 2013-05-22T08:06:32.113 に答える