Question

我希望用javascript实现，比如当我碰上任何缩略图（btn-1，btn-2和btn-3）时，特定的类应该动态添加到box div。

我的代码：JSFiddle

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你的javascript正在运行，但你的CSS却没有。

你需要在.bg-1，.bg-2和.bg-3

中添加！important如下

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

否则id样式优先于类样式

如果右键单击灰色div并在Chrome中选择inspect元素，则可以看到正在添加类名。

Answer 2

您想使用jquery .addClass（）函数：

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

该功能可能如下所示：

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

Answer 3

您可以将所有缩略图作为数组获取，然后遍历数组并动态地向每个缩略图添加一个事件侦听器，这将在单击时将所需的className添加到框中：

var thumbnails = document.getElementsByClassName('thumbnail');

Array.from(thumbnails).forEach(function(thumbnail) {
    var id = thumbnail.id;
    thumbnail.addEventListener('click', function() {
        document.getElementById('box').className = id.replace('btn', 'bg')
    });
});

Answer 4

不要使用课程，只需使用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>

使用javascript onclick将classname添加到div

4 个答案: