javascript - 单击 anchor 标记和外部元素时如何使用 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，这将使您的代码更具可读性和可理解性，这总是一个加号!