为什么我的按钮在添加 class 后不会改变状态？

Question

我有一个按钮，它是我使用 <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>

Answer 1

为简单起见，只需添加大小写而不是切换，因为您不知道有多少元素可能会切换您的 class。

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

编辑：澄清一下，这个 anser 仍然留下了 slideToggle 的弱点，它只会切换，如果出于某种偶然情况，你的 .blogs 之一正在显示而另一个没有显示，那将导致问题。

为什么我的按钮在添加 class 后不会改变状态？

Why won't my button change state after adding a class?

jquery

input

button

flip