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>

就是这样

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上切换一个类来显示/隐藏它，而不是你对style属性的if / else检查。）

Answer 3

我建议使用jQuery：

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

切换SPAN类以及此div切换

3 个答案: