主页 / 问题 / 1008966
Accepted
Виктор Тюрин
Asked:2020-08-01 17:42:08 +0000 UTC2020-08-01 17:42:08 +0000 UTC

jQuery相同的类名

  • 772

我有 2 个按钮，它们在伪类（图像图标）之后都有相同的。在 JQuery 的帮助下，单击按钮时我会旋转此图标。但问题是两个按钮的图标被旋转了......我怎样才能只让按下的按钮的特定图标旋转？

$($btn).click(function() {
    $('.personal-account-tables table').toggleClass('border-bottom-table');
    $('.personal-account-tables tr th button:first-child').after(function(){
      $(this).toggleClass('rotate-block');
    });
  });

这是按钮

<button class="uk-width-1-6@m btn-tariff-select btn-show-tariff-table" type="button">Сравнить тарифы</button>

    <button class="uk-width-1-6@m btn-tariff-select btn-show-tariff-table" type="button">Сравнить тарифы</button>

这是按钮内图像的样式

button {
    margin-top: 15px;
    font-weight: normal;

    &:after {
        display: inline-block;
        padding: 0 0 0 15px;
        content: url('../lk-arrow.svg');
        transition: all 0.1s ease-in-out;
    }
    &.rotate-block:after {
        padding: 0 15px 0 0;
        transform: rotate(180deg);
    }
    &:hover:after {
        content: url('../lk-arrow-white.svg');
    }
}
jquery

1 个回答

  1. Best Answer

    在这种情况下，除了滚动按钮本身之外，还需要另外更改父表的类。

    该问题已通过以下代码解决：

    function toggleCatalogBlock($btn, $block) {

  $($btn).click(function() {
    var $button = $(this), 
        $table = $button.closest('.personal-account-tables table');

    $(this).toggleClass('rotate-block'); //прокрутка текущей кнопки

    $table.toggleClass('border-bottom-table'); // добавление класса к родителю
};

    函数中省略了部分代码。与解决问题无关。完整的示例代码可以在这里找到

    • 1

相关问题