为多个div设置类

我对多个div使用了鼠标悬停效果。鼠标悬停操作所有div的类，将其设置为“class ='active'”，以便可以看到它。现在我尝试“重置”某个事件的更改，例如“点击”。我mouseoverscript（使用jQuery）如下为多个div设置类

$(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'); 
     }); 
    });

现在我有多个鼠标悬停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组复位效果很好，但有一些第二次不受影响。我该如何解决这个问题？

来源

2011-08-29 Marco

@kingjiv是正确的 - 您不能在同一文档中重复使用“id”值;换句话说，带有“id”的每个元素必须具有**唯一**“id”。 – Pointy

http://jsfiddle.net/r4epD/似乎工作正常，并且请注意，您不能使用多次'相同的ID'（如'switch1'，等等） –

我认为这个问题与具有相同ID的div有关。尝试命名第二组，例如slides_2和switch_2，并对部分ID $（id^=“幻灯片”）进行选择。

来源

2011-08-29 16:40:22 Mindfulgeek

谢谢。我所做的是将第一个id重命名为例如'slide_i'，然后使用'$（'[id^= slide_]'）。attr（'class'，'active'）'将活动类设置为全部。 – Marco

ID必须是唯一的。您应该将switches和slides更改为类而不是ID。

来源

2011-08-29 16:37:46

为多个div设置类

回答

相关问题