更改表格的边框和背景颜色并将鼠标悬停在它们上面
Changing border and background colors of a table and hovering over them
我正在尝试通过单击按钮来更改表格的背景和边框。我也在尝试通过将鼠标悬停在按钮上来更改颜色。如果我先做的话,我让悬停工作。 我遇到的问题是,当我单击按钮更改背景颜色时,我无法单击任何其他按钮更改为该特定按钮颜色。 例如,我有四个按钮,蓝色,绿色,黄色,红色。 如果我单击蓝色按钮,背景将变为蓝色,然后如果我选择单击其他彩色按钮,它将不起作用,并且在我单击任何按钮一次后,我的悬停将不再起作用。 另外,如何减少耦合。按照我添加更多颜色按钮的速度,这只等于更多的代码行。
<h1 class="underline">Choose a Background or Border Color</h1>
<div class="divCenter">
<div class="divTable" ></div>
</div></br>
<button id="button1">Blue</button>
<button id ="button2">Green</button>
<button id="button3">Yellow</button>
<button id ="button4">Red</button></br>
<button id="button5">Blue Border</button>
<button id ="button6">Green Border</button>
<button id="button7">Yellow Border</button>
<button id ="button8">Red Border</button></br>
<script>
$(document).ready(function()
{
$("#button1").click(function()
{
$(".divTable").attr("class","divTableBlue");
});
$("#button2").click(function()
{
$(".divTable").attr("class","divTableGreen");
});
$("#button3").click(function()
{
$(".divTable").attr("class","divTableBlue");
});
$("#button4").click(function()
{
$(".divTable").attr("class","divTableRed");
});
$("#button1").hover(function()
{
$(".divTable").addClass("divTableBlue");
},
function()
{
$(".divTable").removeClass("divTableBlue");
});
$("#button2").hover(function()
{
$(".divTable").addClass("divTableGreen");
},
function()
{
$(".divTable").removeClass("divTableGreen");
});
$("#button3").hover(function()
{
$(".divTable").addClass("divTableYellow");
},
function()
{
$(".divTable").removeClass("divTableYellow");
});
$("#button4").hover(function()
{
$(".divTable").addClass("divTableRed");
},
function()
{
$(".divTable").removeClass("divTableRed");
});
});
</script>
CSS 是
.divTable
{
display:table;
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:grey;
border-style:solid;
border-width:5px;
}
.divTableBlue
{
display:table;
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:blue;
border-style:solid;
border-width:5px;
}
.divTableGreen
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:green;
border-style:solid;
border-width:5px;
}
.divTableYellow
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:yellow;
border-style:solid;
border-width:5px;
}
.divTableRed
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:red;
border-style:solid;
border-width:5px;
}
.divTableBlueBorder
{
display:table;
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
border-style:solid;
border-width:5px;
border-color:blue;
}
.divTableGreenBorder
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
border-style:solid;
border-width:5px;
border-color:green;
}
.divTableYellowBorder
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
border-width:5px;
border-style:solid;
border-color:yellow;
}
.divTableRedBorder
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
border-style:solid;
border-width:5px;
border-color:red;
}
看看这是否是你所期望的:http://jsfiddle.net/DerekL/YjzmY
您可以将代码简化为:
var colors = [ //first make a list of colors.
"Blue",
"Green",
"Red",
"Yellow"
],
selected = ""; //later used to store selected color
然后做一个函数:
function seperate(arr,j){ //created a separate function
return function(){ // to store i given by the loop.
$(".divTable")
.attr("class","divTable")
.addClass("divTable" + arr[j]);
selected = arr[j];
}
}
function seperate_hover(arr,j){
return function(){
$("#button"+(j+1)).hover(function(){
$(".divTable")
.attr("class","divTable")
.addClass("divTable"+arr[j]);
},function(){
$(".divTable")
.attr("class","divTable")
.addClass("divTable"+selected); //change back to the selected color.
});
}
}
function doTheJob(arr) {
for (var i = 0; i < arr.length; i++) {
$("#button" + (i + 1)).on("click", seperate(arr,i)); //click
seperate_hover(arr,i)(); //hover
}
}
doTheJob(colors); //the script will now do the job for you
另外,使用 .on("click")
而不是 .click()
。
使用
$('target').on('click', function(){
//add your code
});
而不是.click()
相关文章:
- 当鼠标悬停在文本中的单词上时显示警报
- d3.js鼠标悬停鼠标输出问题
- 悬停(鼠标离开)方法不显示效果
- 为什么addEventListener只执行我的函数,而不为其创建鼠标悬停/鼠标打开事件
- 在鼠标悬停/鼠标出类中的任何元素时更改元素 ID
- 检测鼠标悬停/鼠标单击,无论 Z 顺序/图层级别如何
- 悬停/鼠标悬停功能冲突
- 子元素的 JavaScript 鼠标悬停/鼠标退出问题
- 在 iPad 上触发悬停/鼠标退出/模糊
- 如何通过按钮单击和鼠标悬停/鼠标退出显示和隐藏节点文本?D3/JS.
- 背景图像在悬停/鼠标悬停时消失,菜单在IE中不起作用
- jQuery鼠标悬停/鼠标悬停将不适用于Live
- jQuery-悬停以在刷新时触发悬停/鼠标悬停
- 悬停/鼠标悬停未在元素内部的每次移动中激活
- HighCharts条形图:悬停鼠标时显示条形值
- 鼠标悬停/鼠标离开,鼠标进入/鼠标离开,鼠标悬停闪烁问题
- 滚动时未触发鼠标悬停/鼠标输入
- JavaScript-如何在鼠标悬停/鼠标悬停上同时更改TR中所有TD的背景颜色
- 记住并在悬停鼠标悬停后显示以前活动的导航选项卡
- JavaScript延迟CSS悬停/鼠标悬停效果