如何动态设置一个'div'元素的颜色以匹配颜色小部件使用for循环选择的颜色？ [英] How to dynamically set the colour of a 'div' element to match that of the colour picked on a colour widget using for loop?
本文介绍了如何动态设置一个'div'元素的颜色以匹配颜色小部件使用for循环选择的颜色？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个html代码，包括一个颜色小部件选择器，整个页面的背景将根据用户点击的预定义选择更改。我有工作，但我想突出的颜色选择周围的框，一旦它被点击区分与其他未选择的选择。
I have this html code that includes a colour widget picker, the background of the entire page will change according to which pre-defined choice the user clicks on. I have got that working but I would like to highlight the box around the colour choice once it has been clicked to differentiate from the other unselected choices.
<html>
<head>
<meta charset="utf8" />
<title></title>
<script>
function changeColor(e) {
document.getElementById("page").className = e;
var i;
var x = document.getElementById("page");
for (i = 0; i < 5; i++)
if (document.getElementById("page").className = e ){
x.getElementsByTagName("li")[i].style.borderColor = "red";
}
}
</script>
</head>
<body>
<div id="page" class=""><!-- start page wrapper -->
<hr />
<div id="theme-picker">
<h2>Theme Picker</h2>
<p>Select a theme from the options below:</p>
<div id="palette">
<ul>
<li class="midnight" onClick="changeColor('midnight')">Midnight</li>
<li class="matrix" onclick="changeColor('matrix')">Matrix</li>
<li class="peardrop" onclick="changeColor('peardrop')">Peardrop</li>
<li class="skylight" onclick="changeColor('skylight')">Skylight</li>
<li class="sunset" onclick="changeColor('sunset')">Sunset</li>
</ul>
<div class="clearfix"></div>
<hr />
</div><!-- /page -->
</body>
</html>
推荐答案
class）：
$('.changeColor').click(function(){
var $this=$(this);
var color=$this.data('color');
$('#page').removeClass('midnight matrix peardrop skylight sunset').addClass(color);
$('.changeColor').removeClass('highlight'); // jquery actually implements a loop here it's just internal...
$this.addClass('highlight');
});
/*
// Methods with a explicit loop per your comment
$('.changeColor').click(function(){
var $this=$(this);
var $page=$('#page');
var color=$this.data('color');
$page.removeClass('midnight matrix peardrop skylight sunset').addClass(color);
$page.find('li').each(function(){ // jQuery loop....not really neccisary though...
$(this).removeClass('highlight');
});
$this.addClass('highlight');
});
$('.changeColor').click(function(){
var $this=$(this);
var $page=$('#page');
var color=$this.data('color');
$page.removeClass('midnight matrix peardrop skylight sunset').addClass(color);
var lis = $page.find('li');
for(var i =0; i< lis.length; i++){ // js loop....again not really neccisary though...
$(lis[i]).removeClass('highlight');
}
$this.addClass('highlight');
});
*/
body {
margin: 10px;
}
.midnight{
background-color:black;
color:white;
}
.matrix{
background-color:purple;
}
.peardrop{
background-color:grey;
}
.skylight{
background-color:blue;
}
.sunset{
background-color:pink;
}
.highlight{
background-color:yellow;
outline: 1px solid #red;
color:black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page" class=""><!-- start page wrapper -->
<hr />
<div id="theme-picker">
<h2>Theme Picker</h2>
<p>Select a theme from the options below:</p>
<div id="palette">
<ul>
<li class="changeColor" data-color="midnight">Midnight</li>
<li class="changeColor" data-color="matrix">Matrix</li>
<li class="changeColor" data-color="peardrop">Peardrop</li>
<li class="changeColor" data-color="skylight">Skylight</li>
<li class="changeColor" data-color="sunset">Sunset</li>
</ul>
<div class="clearfix"></div>
<hr />
</div>
这篇关于如何动态设置一个'div'元素的颜色以匹配颜色小部件使用for循环选择的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
