与此 div 一起切换 SPAN 类

Question

我已经尝试了几种不同的方法，但似乎无法弄清楚如何将跨度的类从“die2”切换到“die3”以及将 div 的显示样式从“块”切换到“无”。有人有任何解决方案吗？ （基本上，当页面加载时，此广告将显示，当您单击红色 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 并为 span 使用相同的代码。多谢你们！

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

就是这样

Answer 2

您不需要 jQuery，尽管您可能会喜欢它。您需要做的就是使用元素的classList 对象。 你可以用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.

这是您的代码的修改版本，作为您可以做什么的示例 - 虽然我不确定这是否正是您想要做的，但它应该为您指明正确的方向。

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

（我也在切换 div 上的一个类以显示/隐藏它，而不是你的 if/else 检查样式属性。）