Почему моя кнопка не изменит состояние после добавления класса? - PullRequest
Новая
       45

Почему моя кнопка не изменит состояние после добавления класса?

0 голосов
/ 27 января 2020

У меня есть кнопка, которую я создал с помощью тега <input> и некоторого jQuery / CSS, чтобы оформить ее и сделать ее функциональной.

Моя проблема в том, что я не могу заставить свою кнопку вращаться при нажатии это, хотя я добавил туда функцию flip. В чем может быть проблема? Я делаю это неправильно или что-то упустил? Есть ли более простая альтернатива, которую я могу попробовать? Я просто хочу, чтобы он переворачивался при нажатии на него из его текущего состояния, которое отображается во входном значении. 

$(document).ready(function() {
  $('.myInnerBtn').click(function() {
    $(".blogs").slideToggle("slow", function() {
      $(".myInnerBtn").toggleClass('flip');
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="innerbuttonwrapper1">
    <input type="button" value="►" class="myInnerBtn" style="background:none; font-family:Overpass, Arial, Verdana; font-size:18px; border:none; cursor:pointer; color:#741dff;" />
    <a class="blogs" href="iwriteonwheels.com/post/190161104157/tbt-ace-of-base" style="display:none;">&nbsp;&nbsp;&nbsp;TBT: Ace of Base</a>
    <br>
    <p>
        <a class="blogs" href="iwriteonwheels.com/post/190002799642/2020" style="display:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020</a>
        <br><br><br>
</div>

1 Ответ

0 голосов
/ 27 января 2020

Для простоты просто добавьте регистр вместо переключателя, поскольку вы не знаете, сколько элементов может переключить ваш класс. 

$(document).ready(function() {
  $('.myInnerBtn').click(function() {
    $(".blogs").slideToggle("slow", function() {
        if ($(".blogs").is(':visible'))
            $(".myInnerBtn").addClass('flip');
        else
            $(".myInnerBtn").removeClass('flip');
    });
  });
});
.flip { transform: rotate(90deg);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="innerbuttonwrapper1">
    <input type="button" value="►" class="myInnerBtn" style="background:none; font-family:Overpass, Arial, Verdana; font-size:18px; border:none; cursor:pointer; color:#741dff;" />
    <a class="blogs" href="iwriteonwheels.com/post/190161104157/tbt-ace-of-base" style="display:none;">&nbsp;&nbsp;&nbsp;TBT: Ace of Base</a>
    <br>
    <p>
        <a class="blogs" href="iwriteonwheels.com/post/190002799642/2020" style="display:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020</a>
        <br><br><br>
</div>

Редактировать: чтобы прояснить, этот ансер по-прежнему оставляет слабость slideToggle, который будет просто переключаться, если для какого-то случая один из ваших .blogs показывать, а другой нет, это вызовет проблемы.

...