为多个div设置类
我正在对多个 div 使用鼠标悬停效果。鼠标悬停操作所有 div 的类，将其中一个设置为“class='active'”，以便可以看到它。现在我尝试“重置”特定事件的更改，例如“单击”。 我的 mouseoverscript （使用 jQuery）如下
$(document).ready(function() {
switches = $('#switches > span');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});
现在我有多个 mouseover div 导致以下 html 文件
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="switch.js"></script>
<style type="text/css">
#switches .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
}
</style>
</head>
<body>
<div id="slides">
<div id="slide1" class="active">Well well.</div>
<div id="slide2">Oh no!</div>
<div id="slide3">You again?</div>
<div id="slide4">I'm gone!</div>
</div>
<div id="switches">
<span id="switch1" class="active">First slide</span>
<span id="switch2">Second slide</span>
<span id="switch3">Third slide</span>
<span id="switch4">Fourth slide</span>
</div>
<br><a href = "javascript:void(0)" onclick ="switches.removeClass('active');slides.removeClass('active');$(switch1).attr('class','active');$(slide1).attr('class','active')">Reset</a>
<div id="slides">
<div id="slide1" class="active">Well well.</div>
<div id="slide2">Oh no!</div>
<div id="slide3">You again?</div>
<div id="slide4">I'm gone!</div>
</div>
<div id="switches">
<span id="switch1" class="active">First slide</span>
<span id="switch2">Second slide</span>
<span id="switch3">Third slide</span>
<span id="switch4">Fourth slide</span>
</div>
对于第一个 div 组，重置效果很好，但第二个 div 组不受影响。我该如何解决这个问题？
I am using a mouseover effect for multiple div's. The mouseover manipulates the class of all the div's, setting one as "class='active'" so it can be seen. Now I try to "reset" the changes on a certain event, for instance on 'click'.
My mouseoverscript (using jQuery) is as follows
$(document).ready(function() {
switches = $('#switches > span');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});
And now I have multiple mouseover div's resulting in following html file
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="switch.js"></script>
<style type="text/css">
#switches .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
}
</style>
</head>
<body>
<div id="slides">
<div id="slide1" class="active">Well well.</div>
<div id="slide2">Oh no!</div>
<div id="slide3">You again?</div>
<div id="slide4">I'm gone!</div>
</div>
<div id="switches">
<span id="switch1" class="active">First slide</span>
<span id="switch2">Second slide</span>
<span id="switch3">Third slide</span>
<span id="switch4">Fourth slide</span>
</div>
<br><a href = "javascript:void(0)" onclick ="switches.removeClass('active');slides.removeClass('active');$(switch1).attr('class','active');$(slide1).attr('class','active')">Reset</a>
<div id="slides">
<div id="slide1" class="active">Well well.</div>
<div id="slide2">Oh no!</div>
<div id="slide3">You again?</div>
<div id="slide4">I'm gone!</div>
</div>
<div id="switches">
<span id="switch1" class="active">First slide</span>
<span id="switch2">Second slide</span>
<span id="switch3">Third slide</span>
<span id="switch4">Fourth slide</span>
</div>
For the first div group the reset works well, but somehwo the second stays unaffected. How can I work around this problem?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
ID 必须是唯一的。您应该将
switches和slides更改为类而不是 ID。IDs must be unique. You should change
switchesandslidesto classes instead of IDs.我认为这个问题与具有相同 id 的 div 有关。尝试将第二组命名为“slides_2”和“switches_2”，然后对部分 ID $(id^="slides") 进行选择。
I think the issue has to do with the divs having the same id. Try naming the 2nd group like slides_2 and switches_2 and do a select on the partial ID $(id^="slides").