[英]multiple onclick events on a single div - changing the div border colors - javascript
我把这个代码放在div中:
onclick="this.style.border='solid 1px red';"
如何插入多个触发更改边框颜色的onclick事件 - 例如第一次单击 - 红色,第二次单击 - 蓝色,第三次单击 - 重置?
这正是我所需要的 - 具有多个onclick事件的一个特定div的更改,而不是具有多个div的即兴创作。
编辑:
我也有其他动作调用onclick +我有onmouseenter和onmouseleave事件在同一个div内。 一切都按预期工作,我只能让多个onclick事件无法工作。
我不能让任何这些功能起作用,我不知道为什么。 也许是因为我有更多的动作和事件,或者可能是由WordPress决定的?
(我把一个函数放在<script></script>
里面的标题区域)
我认为这比播放声音更容易,但令人惊讶的是声音是小菜一碟,这似乎是一个真正的挑战......
有人可以帮忙吗?
edit2:这取决于Wordpres。 现在我知道如何使正常的功能工作。
edit3 :我编辑了一个由user1875968发布的小解决方案,我终于得到了我想要的(正确的重置):
var linkClick = 1;
function update_link(obj){
if (linkClick == 1){obj.style.border = 'solid 1px red'};
if (linkClick == 2){obj.style.border = 'solid 1px blue'};
if (linkClick == 3){obj.style.border = 'solid 1px green'};
if (linkClick >3 ) {obj.style.border = 'solid 1px #555555'; linkClick=0};
linkClick++;
}
谢谢大家的帮助;)
你可以使用函数和css类。
确定要在不同类之间切换的样式。 我们把它们当作:
.redBorder
{
border: 1px solid red;
}
.blueBorder
{
border: 1px solid blue;
}
.resetBorder
{
border: none;
}
在div的click事件上声明一个函数:
onclick="switchBorder(this);"
在函数内部,在div类上使用switch case:
function switchBorder(divObj)
{
prevClass = divObj.className;
switch( prevClass )
{
case 'redBorder':
divObj.className = "blueBorder"
break;
case 'blueBorder':
divObj.className = "resetBorder"
break;
case 'resetBorder':
divObj.className = "redBorder"
break;
}
}
希望有所帮助。 :)
编辑:语法错误。
我能想到的唯一方法是每次触发时更改点击事件:
x.onclick = method1;
function method1()
{
x.onclick = method2;
}
funbction method2()
{
x.onclick = method3;
}
function method3()
{
x.onclick = method1;
}
你可以使用整数
onclick="my_function()"
接着:
function my_function(){
i++;
if(i == 1){
//red
}
if(i == 2){
//blue
}
if(i == 3){
i = 0;
// reset
}
}
最好使用javascript。
var clicks = 0;
function changeBorder() {
if(++clicks > 2) clicks = 1;
switch (clicks) {
case 1 : { this.style.border='solid 1px red';}; break;
case 2 : { this.style.border='solid 1px blue';}; break;
}
}
但你必须适应“this”元素。 (我不知道它是哪一个,使用getElementById)
并在HTML中使用,
onclick="changeBorder()"
像这样的东西。 假设默认边框为“1px solid black”。 这可以扩展为包含任意数量的更改和颜色。
function changeBorder(ele){
var colors = ["1px solid black", "1px solid red", "1px solid blue"];
var curInd = colors.indexOf(ele.style.border);
if(curInd != colors.length-1){ //If the current color isn't the last one
//Next color
ele.style.border = colors[curInd++];
} else {
//Reset to first color
ele.style.border = colors[0];
}
}
注意: array.indexOf是旧版浏览器的ECMAscript 5实现,请包含此处的垫片
<script>
var linkClick = 0;
function update_link(obj){
if (linkClick == 0){obj.style.border = 'solid 1px red'};
if (linkClick == 1){obj.style.border = 'solid 1px blue'};
if (linkClick >1 ) {obj.style.border = 'solid 1px red'; linkClick=0};
linkClick++;
}
</script>
HTML
<a href='#' onclick='update_link(this)'> my link </a>
尝试使用像colorCode
这样的全局变量并将其初始化为zero- colorCode=0
并调用函数onClick="ChangeBGColor()"
function ChangeBGColor()
{
colorcode++;
var color='';
if (colorcode==1)
{
color='red';
}
else if (colorcode==2)
{
color='blue';
}
else
{
colorCode=0; /*Reset to zero if colorCode =3 or more*/
color='gray';
}
this.style.border="'solid 1px "+color+ "';" /* Need to correctly apply style for the specific contol*/
}
<div id="x" onclick="Clicked"></div>
<script type="text/javascript">
var clickno=1;
function Clicked()
{
if(clickno==1)
{
document.getElementById('x').style.border="solid 1px red";
}
if(clickno==2)
{
document.getElementById('x').style.border="solid 1px blue";
}
if(clickno==3)
{
document.getElementById('x').style.border="solid 1px red";
clickno=1;
}
clickno++;
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.