Question

我有这个包含颜色小部件选择器的html代码，整个页面的背景将根据用户点击的预定义选项而改变。我有这个工作，但我想突出显示颜色选择框，一旦它被点击以区别于其他未选择的选择。

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

Answer 1

这是我如何做到这一点（当然根据需要更改类）：

＆＃13;

$('.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');
});

*/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

每次调用函数时都可以传递对象，然后更改该对象颜色。像这样：

...
<script>
function changeColor(className,object) {
  document.getElementById("page").className = className;
  var siblings = object.parentElement.getElementsByTagName('li');
  for(var sibling in siblings){
    if(siblings[sibling].className){
      siblings[sibling].className = siblings[sibling].className.split(' ')[0];
    }
  }
  object.className = object.className+' selected';
}
</script>
...
<li class="midnight" onClick="changeColor('midnight',this)">Midnight</li>
<li class="matrix" onclick="changeColor('matrix',this)">Matrix</li>
<li class="peardrop" onclick="changeColor('peardrop',this)">Peardrop</li>
<li class="skylight" onclick="changeColor('skylight',this)">Skylight</li>
<li class="sunset" onclick="changeColor('sunset',this)">Sunset</li>
...

编辑，因为我错过了重置选择的重点。您可以创建一个selected课程，其中包含您需要和完成的任何内容

如何使用for循环动态设置'div'元素的颜色以匹配颜色小部件上拾取的颜色？

2 个答案: