我今天花了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");
}
});
请让我知道我做错了什么以及如何以正确的方式做到这一点。
答案 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_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');
});