Question

使用 javascript onclick 将类名添加到 div

2017-08-24

2863

javascript jquery html css

我想用 javascript 实现类似当我点击任意一个缩略图（btn-1、btn-2 和 btn-3）时，特定类应该动态添加到框 div 中。

我的代码： JSFiddle

document.getElementById('btn-1').onclick = function() {
  document.getElementById('box').className = 'bg-1';
}

#box {
  background-color: darkgray;
  width: 200px;
  height: 200px;
}

.thumbnail {
  width: 30px;
  height: 30px;
  border: 1px solid;
  margin: 5px;
  position: relative;
  float: left;
}

#btn-1 {
  background-color: red;
}

#btn-2 {
  background-color: green;
}

#btn-3 {
  background-color: blue;
}

.bg-1 {
  background-color: red;
}

.bg-2 {
  background-color: blue;
}

.bg-3 {
   background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box"></div>

<div class="thumbnail" id="btn-1"></div>
<div class="thumbnail" id="btn-2"></div>
<div class="thumbnail" id="btn-3"></div>

Answer 1

您的 javascript 可以运行，但 CSS 却不行。

您需要向 .bg-1、.bg-2 和 .bg-3 添加 !important，如下所示

.bg-1 {
  background-color: red !important;
}

否则，id 样式将优先于 class 样式

如果在 Chrome 中右键单击灰色 div 并选择检查元素，则可以看到已添加 classname。

Answer 2

不用费心使用类，只需使用 data- 属性，例如： data-bg="#f00"

$('[data-bg]').css('background', function () {
  $(this).on('click', () => $('#box').css('background', this.dataset.bg));
  return this.dataset.bg;
});

#box {
  background: darkgray;
  width: 120px; height: 120px;
}

[data-bg] {
  width: 30px; height: 30px;
  margin: 5px;
  float: left;
}

<div id="box"></div>
<div data-bg="red"></div>
<div data-bg="#00f"></div>
<div data-bg="rgb(255,0,180)"></div>
<div data-bg="linear-gradient(to right, #E100FF, #7F00FF)"></div>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Answer 3

您想使用 jquery .addClass() 函数：

$('.myButton').addClass('myNewClass');

该函数可能看起来像这样：

$(function () {
     $('.thumbnail').click(function() {
         $('#box').addClass($(this).attr('id'));
     });
})