爲多個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設置類

回答

相關問題