JQuery 添加类功能不起作用

发布于 2024-11-14 14:33:48 字数 981 浏览 2 评论 0原文

我正在尝试创建一个类似于 Twitter 推文区域的元素。鼠标悬停时 DIV 应该是不同的颜色，并且背景图像有新的位置。

然后，当用户单击背景图像位置时，应再次移动，并且仅当用户未悬停时背景颜色才应更改。我尝试过这个但行不通。

JS --

function reviews(id) {
    $('#reviews .review').removeClass('ractive');
    $(id).addClass('ractive');
}

CSS --

#reviews .review {
    font-family:"Lucida Grande", Arial, sans-serif;
    display:block;
    width:599px;
    padding-right:30px;
    background:url(images/ui/arrows.png) -60px -60px no-repeat;
}
#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .review .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .review .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

HTML

<div class="review" onclick="reviews(this);">Blah Blah Blah Blah</div>

任何想法出了什么问题。新类不会应用于该元素。

奇妙

原文

I am trying to have an element rather like the Twitter tweets area. The DIV should be a different colour on mouseover with a new position for the background image.

Then when the user clicks the background image position should move again and the background colour should change only when the user is not on hover. I tried this but it will not work.

JS --

function reviews(id) {
    $('#reviews .review').removeClass('ractive');
    $(id).addClass('ractive');
}

CSS --

#reviews .review {
    font-family:"Lucida Grande", Arial, sans-serif;
    display:block;
    width:599px;
    padding-right:30px;
    background:url(images/ui/arrows.png) -60px -60px no-repeat;
}
#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .review .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .review .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

HTML

<div class="review" onclick="reviews(this);">Blah Blah Blah Blah</div>

Any ideas what is wrong. The new class does not seam to be applied to the element.

Marvellous

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疏忽 2024-11-21 14:33:48

$(id).addClass('ractive');

没有得到合适的选择器。从你的标记来看你应该这样做。

$('.review').click(function() {
    $(this).addClass('ractive');
});

然后，您应该从您的标记中删除 onclick="reviews(this);。如果您使用 jquery 来应用类，请总体上坚持该方法。不要混合使用引人注目的和 unobtrusive javascript。上面发布的代码将仅将 ractive 类添加到您拥有的链接。

另外，将您的 css 从 #reviews .review .ractive 更改为 #reviews .ractive 。您所拥有的类正在寻找带有类 ractive 的 review 中的元素，您不需要它，因为该类位于同一类上元素

#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

$(id).addClass('ractive');

is not getting a proper selector. From your markup you should be doing.

$('.review').click(function() {
    $(this).addClass('ractive');
});

You should then REMOVE onclick="reviews(this); from your markup. If you are using jquery to apply classes, stick with that approach overall. Don't mix obtrusive and unobtrusive javascript. The code posted above will add the ractive class to only the link you have clicked.

Also, change your css from #reviews .review .ractive to just #reviews .ractive. The class you have is looking for an element inside review with the class ractive, you don't need that as the class is on the same element

#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

回复收藏 0 原文

~没有更多了~