切换SPAN类以及此div切换 [英] Toggle SPAN Class along with this div toggle

问题描述

我尝试了几种不同的方法，但似乎无法弄清楚如何将span的类从die2切换到die3以及将div的显示样式从block切换到none。有人有任何解决方案吗？ （基本上当页面加载时，将显示此广告，当您单击红色x（die2）时，添加消失，红色x应更改为绿色复选框（die3）。这是为div切换工作的代码我正在使用。

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> 

谢谢大家，我想我现在已经开始......我又添了一堂课到样式表，然后重新使用JKing回答的内容。我可以让divHide工作，但它只会添加类并删除类。所以我决定ed只是添加一个divShow并使用相同的代码作为跨度。多谢你们！

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>

由于以上在IE中不起作用我使用了Sven的代码并使其工作，我们失踪了＃我们打电话给#mydiv ...

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!

推荐答案

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

这就是它

这篇关于切换SPAN类以及此div切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！