1

私はこれが初めてなので、今日これを理解しようとして8時間費やしましたが、これを完了することはできません. 少なくとも誰かが私を正しい方向に向けることができれば幸いです。

次のコードがあります。

<a href="#" class="image_one sprite"></a>

<a href="#" class="image_two sprite"></a>

CSS:

.sprite {
  background-image: url('sprite.png');
}
.image_one {
  background-position: -25px -85px;
  height: 14px;
  width: 13px;
}
.image_two {
  background-position: -25px -105px;
  height: 14px;
  width: 13px;
}
.image_one_active {
  background-position: -25px -35px;
  height: 14px;
  width: 13px;
}
.image_two_active {
  background-position: -25px -55px;
  height: 14px;
  width: 13px;
}

私がやろうとしていることはこれです：

ユーザーが image_one をクリックすると、クラスは image_one_active に変更され、ユーザーが別のものをクリックすると、クラスが消えて image_one が再びアクティブになります。image_two にも同じ関数が必要です。

これで、ユーザーが image_one_active で image_two をクリックすると、image_one_active は image_one に戻り、image_two は image_two_active になります。

Jqueryで次を使用してみましたが、わかりません：

(function ($) {
    $(document).ready(function () {
        $(".image_one").click(function () {
            $(this).toggleClass("image_two");

        });
    });
})(jQuery);

(function ($) {
    $(document).ready(function () {
        $(".image_one").click(function () {
            $(".image_one").attr("class", "image_one sprite");
        });
    });
})(jQuery);

$(document).mouseup(function (e) {
    var container = $(".image_two");

    if (container.has(e.target).length === 0) {
        $(".image_two").attr("class", "image_one sprite");
    }
});

私が間違っていることと、これを正しい方法で行う方法を教えてください。

4

3 に答える 3

0

私は少し異なる方法でこの問題に取り組みます...画像のクラスを完全に変更するのではなく、追加の「.active」クラスを追加して削除することをお勧めします

html要素は次のようになります

<a href="#" class="image_one active"/>

次に、cssを読み取りに変更できます

.image_one.active {
     /* This selector targets only elements of the .image_one
        class that also have the .active class as well... */
}

.image_one{ /* ... */ }

私の経験では、この手順に従ってjqueryを使用して2番目のクラスを追加および削除する方が簡単なので、この点を提起します

$('.image_one').removeClass('active');
$('.image_one').addClass('active');
// you also have this function available to check if an element has a class
$('.image_one').hasClass('active');

ドキュメントは近日公開予定

jQuery: .addClass() - .removeClass() - .hasClass()

私が言及すべきいくつかのこと：

この構文を意図的に使用していますか?

(function ($) { /*...*/ })(jQuery)

これは、jquery と、$ 参照を使用している可能性のある他の JavaScript ライブラリとの間の競合を回避することを目的としています。他のライブラリや潜在的な競合がない場合は、それを完全に削除できます。

複数のドキュメント対応呼び出しがある場合 必要なのは 1 つだけで、残りのすべてのハンドラーをその 1 つに配置できます

$(document).ready(function(){

    // everything goes here you only need one document ready
    $('.image_one').removeClass('active');

    $(".image_one").click(function () {
       alert("Jquery is Working");
    });

});
于 2013-05-24T02:37:20.973 に答える
-1

別の方法を次に示します。ドキュメントに 1 つのイベント リスナーを追加し、各アンカーに 1 つのイベント リスナーを追加しました。

これが私のコードです：

(function($) {
    $(document).on('click', function() {
        $(this)
            .find('img.image_one_active')
            .removeClass('image_one_active')
            .addClass('image_one');
        $(this)
            .find('img.image_two_active')
            .removeClass('image_two_active')
            .addClass('image_two');
    });

    $('img').eq(0).on('click', function() {
        event.stopPropagation();
        $(this)
            .removeClass('image_one')
            .addClass('image_one_active')
            .siblings('img')
            .removeClass('image_two_active')
            .addClass('image_two');
    });

    $('img').eq(1).on('click', function() {
        event.stopPropagation();
        $(this)
            .removeClass('image_two')
            .addClass('image_two_active')
            .siblings('img')
            .removeClass('image_one_active')
            .addClass('image_one');
    });
})(jQuery);

動作するかどうかを確認するためだけに変更aしimgました。

編集

image_one_activeCSS を変更してとの特異性を高めると、コードを短縮できます。image_two_active

CSS

.sprite {
  background-image: url('http://goo.gl/OKPx8');
  width: 200px; height: 200px;
}
.image_one { background-position: -25px -85px; }
.image_two { background-position: -25px -105px; }
img.image_one_active { background-position: -25px -35px; }
img.image_two_active { background-position: -25px -55px; }

JS

(function($) {
    var imgOne = $('img.image_one'),
        imgTwo = $('img.image_two');

    $(document).on('click', function() {
        imgOne.removeClass('image_one_active');
        imgTwo.removeClass('image_two_active');
    });

    imgOne.on('click', function() {
        event.stopPropagation();
        imgOne.addClass('image_one_active');
        imgTwo.removeClass('image_two_active');
    });

    imgTwo.on('click', function() {
        event.stopPropagation();
        imgTwo.addClass('image_two_active')
        imgOne.removeClass('image_one_active');
    });

+特異性

于 2013-05-24T03:00:38.233 に答える