查看问题的最简单方法是检查此处的代码:http://www.studioimbrue.com/beta
我需要做的是单击缩略图后,从同一缩略图中的所有其他缩略图中删除“选定”类,或者不从页面上的其他画廊中删除它们。现在,除了类(class)移除外,我一切正常。有人在另一个问题上帮助了我,但不够具体(我的 javascript 技能不是那么好!)我正在使用 jQuery。感谢您的帮助。
那么在那种情况下,我不确定为什么这不能正常工作:
$(document).ready(function(){
var activeOpacity = 1.0,
inactiveOpacity = 0.6,
fadeTime = 100,
clickedClass = "selected",
thumbs = ".thumbscontainer ul li img";
$(thumbs).fadeTo(1, inactiveOpacity);
$(thumbs).hover(
function(){
$(this).fadeTo(fadeTime, activeOpacity);
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!$(this).hasClass(clickedClass)) {
$(this).fadeTo(fadeTime, inactiveOpacity);
}
});
$(thumbs).click(function() {
// Remove selected class from any elements other than this
var previous = $(thumbs+'.'+clickedClass).eq();
var clicked = $(this);
if(clicked !== previous) {
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
});
});
最佳答案
我看到您正在使用 jQuery(并相应地编辑了您的问题)。
使用 jQuery,使用 CSS 语法获取匹配元素列表真的很容易:
var list = $('#parentId > .selected');
获取 ID 为“parentId”且类为“selected”的元素的直接子元素的列表。然后你可以用它们做一些事情,比如:
list.removeClass("selected");
然后在要选择的元素后面加上“selected”。
编辑我认为应该这样做:
$(thumbs).click(function() {
// Remove selected class from any elements other than this
var clicked, previous;
clicked = $(this);
if (!clicked.hasClass(clickedClass)) {
previous = $(thumbs+'.'+clickedClass);
previous.removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity);
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
}
});
我假设“selected”类对于看起来正确的淡入淡出效果不是必需的。
请注意,如果被点击的元素已经有类,上面的代码将如何完全忽略点击。如果您不希望这样,请删除 hasClass
检查并将 .not(clicked)
添加到 previous = $(thumbs+'.'+ clickedClass)
行,但我不知道如果你已经做过一次,你的淡入会在那个时候做什么。
我没有得到悬停的东西;我以为你希望这发生在点击时,而不是悬停时。
关于javascript - 从当前组中删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2243644/