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

2

这是一个简单的示例，应该可以解决您所要求的大部分内容，我已尝试使其非常清晰易读，以便您获得一些理解并自己解决这个问题。

$(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并导致类总是被删除。

此外，您还可以通过对您的 css 进行一些更改来使阅读更容易。

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

然后，您还可以将类缩短image_one_active为 just active，这将开始使您的代码更具可读性和可理解性，这始终是一个加分项！

于 2013-05-24T02:33:27.340 回答
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 添加和删除第二个类更容易

$('.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");
    });

});
于 2013-05-24T02:37:20.973 回答
-1

Here's another way to do it. I added 1 event listener on document and 1 on each anchor.

Here's my code:

(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);

I changed a to img just to see if its working.

EDIT

Code can be shortened if you change CSS to increase specificity of image_one_active and 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

于 2013-05-24T03:00:38.233 回答