与JavaScript的onclick添加类名一个div

我要实现的JavaScript像当我碰杯上的任何缩略图（BTN-1，BTN-2和BTN-3）特定类应添加到框格设置动态。与JavaScript的onclick添加类名一个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>

来源

2017-08-24 4ukh

那么，什么是你的问题？什么不是专门工作的？ – scrappedcola

代替带班的烦心事，用一个简单的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>

来源

2017-08-24 22:24:12

我如何使用渐变色与[数据彩]？因为我试过但它不工作！我的渐变颜色：背景：＃7F00FF; /*回退旧的浏览器*/ 背景：-webkit线性梯度（向右，＃E100FF，＃7F00FF）; /*铬10-25时，Safari 5.1-6 */ 背景：线性梯度（向右，＃E100FF，＃7F00FF）; /* W3C，IE 10 +/EDGE，火狐16 +，Chrome浏览器26+，歌剧12 +，Safari浏览器7+ */ – 4ukh

@ 4ukh那样简单......看到我的编辑答案:) –

你的JavaScript工作，但你的CSS不是。

您需要添加！重要如下，以.bg-1，.bg-2和.bg-3

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

否则，ID造型正在采取优先于类造型

你可以看到正在添加的类名，如果你右键点击灰色div并选择Chrome中的检查元素。

来源

2017-08-24 22:15:15 TripWire

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

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

功能可能会是这个样子：

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

来源

2017-08-24 22:18:10

你可以得到所有的缩略图作为一个数组，然后遍历数组并动态添加一个事件监听器给每个，这将添加所需的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') 
    }); 
});

来源

2017-08-24 22:18:57

你缺少括号... –

比较遗憾的是，它现在固定 –

与JavaScript的onclick添加类名一个div

回答

相关问题