javascript - 切换 SPAN 类以及此 div 切换

Question

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

<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 工作，但它只会添加类并删除类。所以我决定只添加一个 divShow 并对跨度使用相同的代码。多谢你们!

<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 时缺少 #...

<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>

我会使用这段代码看看它是否适合我的需要。 :) 谢谢大家!

Answer 1

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

就是这样