Переключите класс SPAN вместе с этим переключателем div

Question

Я пробовал это несколькими разными способами, но не могу понять, как переключить класс диапазона с «die2» на «die3» вместе с переключением стиля отображения div с «block» на «none».У кого-нибудь есть решения?(В основном, когда страница загружается, это объявление будет отображаться, и когда вы нажмете на красный крестик (die2), добавление исчезнет, ​​а красный крестик должен поменяться на зеленый флажок (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 IИспользовал код Свена и заставил его работать, мы пропустили #, когда мы назвали #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 для if / elseатрибут.)

Answer 3

Я Sugest JQuery:

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