Question

好的我有一个javascript翻转。我希望在开始时选择clicked3图片，当我翻转它或翻转其他图片时，将取消选择clicked3。我的html中的图片ID是：clicked1，clicked2，clicked3，clicked4。我已经完成了这段代码，但它不起作用。似乎picture1翻转不起作用而且picture3没有开始选择......任何帮助？

window.onload=function() {
    var domClicked1=document.getElementById("clicked1");
    var domClicked2=document.getElementById("clicked2");
    var domClicked3=document.getElementById("clicked3");
    var domClicked3=document.getElementById("clicked4");

    clicked1.call(domClicked1);
    clicked2.call(domClicked2);
    clicked3.call(domClicked3);
    clicked4.call(domClicked4);

    domClicked1.onmouseover=handleOver1;
    domClicked2.onmouseover=handleOver2;
    domClicked3.onmouseover=handleOver3;
    domClicked3.onmouseover=handleOver4; 


    domClicked1.onmouseout=handleOut1;
    domClicked2.onmouseout=handleOut2;
    domClicked3.onmouseout=handleOut3;
    domClicked4.onmouseout=handleOut4;

}

function clicked1(){
    this.style.backgroundPosition = "0px top";
}

function handleOver1() {
    this.style.backgroundPosition = "-198px top";
}

function handleOut1() {
    this.style.backgroundPosition = "-198px top";
}



function clicked3(){
    this.style.backgroundPosition = "-198px top";
}

function handleOver3() {
    this.style.backgroundPosition = "-198px top";
}

function handleOut3() {
    this.style.backgroundPosition = "0px top";
}

Answer 1

尝试删除一些代码并按问题解决问题。例如......首先尝试显示图片3开始选择...然后从那里开始进一步编码。

Answer 2

首先，您应该只为所有元素使用一个事件侦听器。将事件侦听器提供给包含元素的父级，并引用使用e.target单击的元素。鼠标悬停使用一个事件监听器，鼠标输出一个，单击一个。这样可以节省资源。

然后，不是动态更改CSS属性，而是为给定的类名设置CSS规则，并使用JavaScript添加/删除该类。

此外，当你更改与CSS协调的背景时，你应该总是使用相同的方法，例如，如果你在一个坐标上使用像素，也使用另一个坐标的像素，比如"-198px 0"而不是{{} 1}}。

Answer 3

最后我设法让它发挥作用!!!

window.onload=function() {
var domClicked1=document.getElementById("clicked1");
var domClicked2=document.getElementById("clicked2");
var domClicked3=document.getElementById("clicked3");
var domClicked4=document.getElementById("clicked4");



clicked3.call(domClicked3);

domClicked1.onmouseover=handleOver1;
domClicked1.onmouseout=handleOut1;

domClicked2.onmouseover=handleOver2;
domClicked2.onmouseout=handleOut2;

domClicked3.onmouseover=handleOver3; 
domClicked3.onmouseout=handleOut3;

domClicked4.onmouseover=handleOver4;
domClicked4.onmouseout=handleOut4;

}

function handleOver1(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOut1(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOver2(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOut2(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}



function clicked3(){
    this.style.backgroundPosition = "-198px top";
}

function handleOver3() {
    this.style.backgroundPosition = "-198px top";
}

function handleOut3() {
    this.style.backgroundPosition = "0px top";
}

function handleOver4(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOut4(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

javascript onmouseover和onmouseout问题

3 个答案: