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()以阻止事件触发click document上的.image_one { background-position: -25px -85px; height: 14px; width: 13px; } .image_one.image_one_active { background-position: -25px -35px; }事件处理程序，并导致始终删除这些类。

此外，您还可以通过对css进行一些更改来简化此阅读。

image_one_active

然后，您也可以将active的课程缩短为{{1}}，这样可以让您的代码更具可读性和可理解性，这总是一个优势！

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与可能使用$ reference的任何其他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'); });

+Specificity

单击锚标记和外部元素时，如何使用JQuery交换图像？

3 个答案:

修改