Toggle SPAN Class along with this div toggle

问题:

I have tried this several different ways but can't seem to figure out how to toggle the span's class from "die2" to "die3" along with the toggle of the div's display style from 'block' to 'none'. Anybody have any solutions? (Basically when the page loads, this ad will be displayed and when you click the red x (die2) the add disappears and the red x should change to a green check box (die3). Here's the code that does work for the div toggle that I'm using.

<div id="mydiv" style="display:block">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>

<a href="javascript:;" onmousedown="if(document.getElementById('mydiv').style.display == 'block'){ document.getElementById('mydiv').style.display = 'none'; }else{ document.getElementById('mydiv').style.display = 'block'; }"><span id="myspan" class="die2"><!-- --></span></a> 

Thanks guys, I think I got it going now ... I added another class to the stylsheet and then just reused what JKing answered. I could get the divHide to work but it would just add the class and remove the class. So I decided to just add a divShow and use the same code for the span. Thanks guys!

<div id="mydiv" class="divShow">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>

<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('mydiv').classList.toggle('divShow');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>

Since the above did not work in IE I Used Sven's code and got it to work, we were missing the # when we called the #mydiv...

<script type="text/javascript">
  $("document").ready(function(){
    $("#myspan").click(function(){
      $(this).toggleClass("die2").toggleClass("die3");
      $("#mydiv").toggle();
   });
  });
</script>

<div id="mydiv" class="">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>

<a href="#">
<span id="myspan" class="die2"><!-- --></span>
</a>

I'll work with this code for a bit and see if it will suite my needs. :) Thanks guys!

回答1:

<script type="text/javascript">
  $("document").ready(function(){
    $("#myspan").click(function(){
      $(this).toggleClass("die2").toggleClass("die3");
      $("#mydiv").toggle();
    });
  });
</script>

That's it

回答2:

You don't need jQuery, though you might like it. All you need to do is use an element's classList object. You can do a lot of cool things with classList:

el.classList.add("myClassName")      //adds class (does nothing if el already has that class)
el.classList.remove("myClassName")   //removes class (does nothing if el doesn't have that class)
el.classList.toggle("myClassName")   //toggles class 

el.classList.contains("myClassName") //returns true if el has that class, false if not.

Here's a modified version of your code, as an example of what you could do - though I'm not sure it's exactly what you want to do, but it should point you in the right direction.

<div id="mydiv" class="divHide">
    <img src='http://www.test.com/mypopad.png' alt='' />
</div>

<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
    <span id="myspan" class="die2"><!-- --></span>
</a>

(I'm toggling a class on the div as well to show/hide it, instead of your if/else checking of the style attribute.)

回答3:

I sugest jQuery:

mydiv.toggle() or mydiv.removeClass("die2").addClass("die3")