时间戳

首页 > 解决方案 > 如果存在，如何删除类？

javascript - 如果存在，如何删除类？

问题描述

我们如何在 1 个 div 中处理多个切换类，当我单击最大化按钮或关闭按钮时，最小化功能也会触发。我们该如何处理呢？

我们如何在 1 个 div 中处理多个切换类，当我单击最大化按钮或关闭按钮时，最小化功能也会触发。我们该如何处理呢？

    jQuery(($) => {

    const $chatbox = $(".chatbox");
    const $open = $(".open-chatbox");
    const $minimize = $(".minimize-chatbox");
    const $maximize = $(".maximize-chatbox");
    const $close = $(".close-chatbox");
    const $chatboxTextarea = $("textarea");
  
    $open.on("click", function() {
      const $showChatbox = $chatbox.removeClass("hide-chatbox");
      console.log($showChatbox);
    });

    $minimize.on("click", function() {
        const $minimizeChatbox = $chatbox.toggleClass("minimize");
        console.log($minimizeChatbox);
    });

    let maximized = false;
    $maximize.on("click", function() {
        const $maximizeChatbox = $chatbox.toggleClass("maximize");
        maximized = !maximized;
        $chatboxTextarea.attr("rows", maximized ? 6 : null);
        console.log($maximizeChatbox);
    });

    $close.on("click", function() {
      const $hideChatbox = $chatbox.addClass("hide-chatbox");
      console.log($hideChatbox);
    });

  });
.body {
  width: 100%;
  position: relative;
}

.chatbox {
    position: fixed;
    height: 397px;
    border-radius: 5px 5px 0 0;
    z-index: 10000;
    width: 325px;
    bottom: -30px;
    right: 30px;
}

.chatbox .card-header {
    color: #303030;
    border-bottom: solid 1px #8b8b8b4d;
    font-weight: 500;
    font-size: 16px;
    padding: 10px 10px 5px 10px;
}

.chatbox .card-header span.icons {
    float: right;
    color: #BEC2C9;
}

.chatbox .card-header .icons i.material-icons {
    font-size: 18px;
    margin-right: 5px;
    cursor: pointer;
}

.chatbox .card-body {
    padding: 0 5px 0 5px;
}

.chatbox .card-footer {
    border-top: solid 1px #8b8b8b4d !important;
    margin: 0 !important;
}

.form-group.type-area {
    display: flex;
    margin: 0;
    padding: 0;
}

.type-area textarea {
    width: 300px;
    border: none !important;
    padding: 0 0 0 10px;
    margin: 0;
}

.type-area .form-control:hover {
    box-shadow: none;
}

.type-area button.btn.btn-link {
    padding: 0;
    margin: 0;
}

.chatbox.hide-chatbox {
    display: none;
}

.chatbox.maximize {
    width: 800px;
    height: 527px;
}

.chatbox.minimize {
    height: 40px;
}

.chatbox.maximize textarea {
    width: 775px;
}

.chatbox.maximize .send {
    margin-top: 60px;
}

.minimize .maximize-chatbox {
    display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<body>
<button type="button" rel="tooltip" title="Message" class="btn btn-primary btn-link btn-sm open-chatbox">
                                <i class="material-icons">chat_bubble</i>
                              </button>
  <div class="card chatbox hide-chatbox">
      <div class="card-header minimize-chatbox">
          Featured
          <span class="icons">
          <i class="material-icons maximize-chatbox">web_asset</i>
          <i class="material-icons close-chatbox">close</i>
          </span>
      </div>
      <div class="card-body">
          This is some text within a card body.
      </div>
      <div class="card-footer">
          <form>
          <div class="form-group type-area">
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Type a message..."></textarea>
              <button type="button" class="btn btn-link"><i class="material-icons send">send</i></button>
          </div>
          </form>
      </div>
  </div>
  
</body>

在此处输入图像描述

标签： javascriptjquery

解决方案

看看下面的片段：

更新 1：

此外，您不需要知道在这种情况下是否存在类，只需删除该类，如果存在，则将其删除，如果不存在，则不会发生任何事情。

更新 2：

根据您的代码，您指定了一个最小化按钮，但删除它没有问题。

如果您有问题toggleClass()不需要使用它，只需考虑一种解决方法，例如使用hasClass()代替。使用这种方法，您也可以更改调整大小的文本或图标。

(function ($) {
  'use strict';

  $(function () {
    const $chatbox = $(".chatbox");
    const $open = $(".open-chatbox");
    const $maximize = $(".maximize-toggle-chatbox");
    const $close = $(".close-chatbox");
    
    function logClass(element) {
      console.log(element.attr('class'));
    }
  
    // chatbox open button click event
    $open.on("click", function() {
      // if there is no selector for chatbox
      if(!$(this).attr('data-for')) return;
      
      const current_chatbox = $($(this).attr('data-for'));
      
      // if there is no selector present with specific selector
      if(!current_chatbox.length) return;
      
      current_chatbox.removeClass("hide-chatbox");
      
      // log classes of chatbox
      logClass(current_chatbox);
    });

    // chatbox maximize button click event
    $maximize.on("click", function() {
      const current_chatbox = $(this).closest('.chatbox');
      if(current_chatbox.hasClass('maximize')) {
        current_chatbox.removeClass("maximize").addClass('minimize');
        $(this).text('maximize chat');
      } else {
        current_chatbox.removeClass("minimize").addClass('maximize');
        $(this).text('minimize chat');
      }
      
      // log classes of chatbox
      logClass(current_chatbox);
    });

    // chatbox close button click event
    $close.on("click", function() {
      const current_chatbox = $(this).closest('.chatbox');
      current_chatbox.addClass("hide-chatbox");
      
      // log classes of chatbox
      logClass(current_chatbox);
    });
  });
})(jQuery);
.chatbox {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-color: #ccc;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
}

.maximize {
  width: 100%;
  height: 100%;
}

.hide-chatbox {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="open-chatbox" type="button" data-for="#theChatbox">
  open chat
</button>

<div class="chatbox hide-chatbox" id="theChatbox">
  <button class="close-chatbox" type="button">
    close chat
  </button>
  
  <button class="maximize-toggle-chatbox" type="button">
    maximize chat
  </button>
</div>

推荐阅读