單擊錨標記和外部元素時，如何使用JQuery交換圖像？

Question

由於我是新手，所以我今天已經花了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");
    }
});

請讓我知道我在做錯什么，以及如何正確地做到這一點。

Answer 1

這是一個簡單的示例，它可以解決您的大部分要求，為了使您有所了解並自己解決此問題，我已嘗試使其非常清晰易讀。

$(document).ready(function(){
  $(document).on('click', '.image_one', function(evt){
    $('image_one').addClass('image_one_active');
    $('image_two').removeClass('image_two_active');
    evt.stopPropagation();
  });

  $(document).on('click', '.image_two', function(evt){
    $('image_one').removeClass('image_one_active');
    $('image_two').addClass('image_two_active');
    evt.stopPropagation();
  });

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

我添加了event.stopPropagation()來停止事件觸發document上的click事件處理程序，並導致始終刪除類。

另外，您還可以通過對CSS進行一些更改來使閱讀更加容易。

.image_one {
  background-position: -25px -85px;
  height: 14px;
  width: 13px;
}
.image_one.image_one_active {
   background-position: -25px -35px;
 }

然后，您也可以將image_one_active的類縮短為active ，這將使您的代碼更具可讀性和可理解性，這總是一個加分！

Answer 2

我會以略有不同的方式解決此問題...而不是完全更改圖像的類，我建議僅向它們添加和刪除其他“ .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可以輕松添加和刪除第二個類

$('.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庫之間發生沖突。 如果沒有其他庫或潛在沖突，則可以完全刪除。

您有多個文檔就緒調用，您只需要一個即可，您可以將所有剩余的處理程序放入一個

$(document).ready(function(){

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

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

});

Answer 3

這是另一種方法。 我在文檔上添加了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只是為了查看其是否有效。

編輯

如果更改CSS以提高image_one_active和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');
    });

+特異性