javascript - 如何隐藏类名动态变化的div元素？

Question

在模式打开之前:

<div class="classname1">Some Text</div>

模态关闭后:

<div class="classname1 classname2">Some Text</div>

Answer 1

由于您的问题不清楚，假设您想添加和删除某些功能的类。

我在这里使用 jQuery 创建了一个示例 fiddle a link !

HTML

<div class="custCls" id="banner-message">
 <div>Hello World</div>
  <button id="addStyle">Add Style</button>
  <button id="removeStyle">Remove Style</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.custCls{
   width: 300px;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

jQuery

var banner = $("#banner-message")
var button = $('#addStyle');
var button1 = $('#removeStyle');

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})

button1.on("click", function(){
  banner.removeClass("alt")
})