时间戳

首页 > 解决方案 > 激活按钮时切换元素的不同类名

jquery - 激活按钮时切换元素的不同类名

问题描述

$(function () {
    $("#my-buttons").on('click', 'button', function () {
      $('button').not(this).removeClass('active');
      $(this).toggleClass('active');
    });
});

$(function () {
    $('body').on('click', '.btn-display', function () {
        $(".awesome-element").toggleClass("hidden shown");
    });
});

$(function () {
    $('body').on('click', '.btn-select', function () {
        $(".awesome-element").toggleClass("selected");
    });
});

$(function () {
    $('body').on('click', '.btn-size', function () {
        $(".awesome-element").toggleClass("small big");
    });
});
#my-buttons {width: 1190px;max-width:100%;
  margin: 0 auto;}
button {outline: 0;}
button.active {color:green;}
.awesome-element {padding:20px; width:240px; text-align:center;  background:grey; margin-top:30px; color:#FFF;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-buttons">
    <button class="btn-display">#1 toggle hidden-shown</button>
    <button class="btn-select">#2 add/remove select</button>
    <button class="btn-size">#3 toggle big small</button>
    
    
</div>

<div class="awesome-element hidden small">when a button is presed -  respective classname must be toggled, while previously added classname changed to default</div>

如您所见，我的 jQuery 中有四个函数。它们几乎可以正常工作，但有一些错误：

  1. 我认为所有这些都应该是单一功能，而不是四个不同的功能。
  2. 如果您按下（一次）按钮＃2，它会添加selected，awesome-element但如果您按下按钮＃1 或＃3，它不会删除此元素。它留下selected了，但它不应该。
  3. 与其他按钮相同。默认情况下awesome-element是hiddenand small（参见原始 HTML），所以如果您按下按钮 #3 或 #1，它会切换相应的类（隐藏<->显示和小<->大）。因此，如果您awesome-element变大（通过单击按钮#3）然后单击按钮#2 或#1，它会保持大，当它应该变为默认值时 -> 它很小。

请重新打开这个问题，因为这个问题没有回答它jQuery - 从元素中添加/删除类名并在按钮上切换活动类

标签： jquerybuttontoggle

解决方案

推荐阅读