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

时间:2013-05-24 02:20:46

标签: javascript jquery html css toggle

我今天花了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");
    }
});

请让我知道我做错了什么以及如何以正确的方式做到这一点。

3 个答案:

答案 0 :(得分: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上的.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}},这样可以让您的代码更具可读性和可理解性,这总是一个优势!

答案 1 :(得分: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与可能使用$ 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");
    });

});

答案 2 :(得分:-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只是为了查看它是否有效。

修改

如果您更改CSS以提高image_one_activeimage_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