Question

因此，我做了一个基本的onclick切换页面。我写的代码行得通，但是当我尝试重构它时，它就行不通了。有人可以指出为什么以及如何解决它吗？

我只对一个图像尝试了重构的JS-为什么在第一个图像不起作用时对所有图像都尝试它。

我将附加HTML，有效的JS和重构的JS。我不会从工作文件中包含所有JS。我将提供切换第一个图像的代码（我已重复使用该代码来切换后五个图像）。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type= "text/css"  href="#">
<link href="https://fonts.googleapis.com/css? 
family=Indie+Flower&display=swap" rel="stylesheet">
<title>Dogs to Cats</title>
</head>
<body>
<h1>Dog to Cat Magic!</h1>
    <div class="container">
        <img id ="whiteLab" src="whiteLab.jpg" alt="White Lab">
        <img id ="waterDog" src="waterDog.jpg" alt="Water Dog">
        <img id ="spanielBall" src="spanielBall.jpg" alt="Spaniel with a 
ball">
        <img id="glassesDog" src="glassesDog.jpg" alt="Dog with glasses">
        <img id="brownLab" src="brownLab.jpg" alt="Brown Lab">
        <img id="tiredDog" src="tiredDog.jpg" alt="Tired dog">
    </div>
 <script src="newdogs.js"></script>
 </body>
</html>

//seperate JS document

let whiteLab = document.getElementById("whiteLab");
let whiteLabImage = "whiteLab.jpg";
let fatCat = "fatCat.jpg";
let image_tracker = "whiteLab";

whiteLab.onclick = function(){

if(image_tracker === "whiteLab"){
    whiteLab.src = fatCat;
    image_tracker = "fatCat";
}else{
    whiteLab.src = whiteLabImage;
    image_tracker ="whiteLab";
}
};

//seperate JS document

let whiteLab = document.getElementById("whiteLab");
let whiteLabImage = "whiteLab.jpg"
let fatCat = "fatCat.jpg"
let image_tracker = "whiteLab";

const dogClicker = function (image_tracker, dogsrc, dogImage, catImage){
if (image_tracker === "whiteLab"){
     dogsrc.src = catImage;
     image_tracker = "fatCat";
} else{
    dogsrc.src =dogImage;
    image_tracker = "whiteLab"
};
};


whiteLab.onclick = dogClicker(image_tracker, whiteLab, whiteLabImage, 
fatCat);

Answer 1

之所以会发生这种情况，是因为函数 dogClicker（）的参数之一和全局变量具有相同的名称- image_tracker 。最好使函数的参数变量具有唯一性，或者直接更改全局变量而不将其传递给函数。

此外，如果您这样添加click事件监听器：

whiteLab.onclick = dogClicker(image_tracker, whiteLab, whiteLabImage, 
fatCat);

无论用户是否实际点击回调函数，回调函数都会至少调用一次。

最好这样做：

whiteLab.addEventListener("click", function() {
  dogClicker(image_tracker, whiteLab, whiteLabImage, fatCat);
});

这是完整的示例：

let whiteLab = document.getElementById("whiteLab");
let whiteLabImage = "https://picsum.photos/id/735/200/300"
let fatCat = "https://picsum.photos/id/75/200/300"
let image_tracker = "whiteLab";

function dogClicker(imgTrck, dogsrc, dogImage, catImage) {
  if (imgTrck == "whiteLab") {
    dogsrc.src = catImage;
    image_tracker = "fatCat";
  } else {
    dogsrc.src = dogImage;
    image_tracker = "whiteLab"
  }
}

whiteLab.addEventListener("click", function() {
  dogClicker(image_tracker, whiteLab, whiteLabImage, fatCat);
});

<link rel="stylesheet" type="text/css" href="dogs.css">
<link href="https://fonts.googleapis.com/css? 
family=Indie+Flower&display=swap" rel="stylesheet">
<h1>Dog to Cat Magic!</h1>
<div class="container">
  <img id="whiteLab" src="https://picsum.photos/id/735/200/300" alt="White Lab">
  <img id="waterDog" src="waterDog.jpg" alt="Water Dog">
  <img id="spanielBall" src="spanielBall.jpg" alt="Spaniel with a 
ball">
  <img id="glassesDog" src="glassesDog.jpg" alt="Dog with glasses">
  <img id="brownLab" src="brownLab.jpg" alt="Brown Lab">
  <img id="tiredDog" src="tiredDog.jpg" alt="Tired dog">
</div>

Answer 2

您分配 whiteLab.onclick 的方式是错误的。

whiteLab.onclick = dogClicker（image_tracker，whiteLab，whiteLabImage， fatCat）;

将调用“ dogClicker”函数，并将返回值分配给click，而不是将函数引用分配给whiteLab.onclick

请使用bind方法。

whiteLab.onclick = dogClicker.bind（null，image_tracker，whiteLab，whiteLabImage， fatCat）;

此外，请始终检查控制台日志中是否有错误。他们非常有帮助。您已经在两个js文件中都声明了变量，第二个js文件中的声明语句将引发错误，因为已经使用相同的名称声明了变量。

Answer 3

因此，我使用了晦涩的建议，并使其生效！我将其张贴在这里，以便其他任何人都可以在此处阅读评论，查看我的代码并希望了解其工作原理。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type= "text/css"  href="#">
<link href="https://fonts.googleapis.com/css? 
family=Indie+Flower&display=swap" rel="stylesheet">
<title>Dogs to Cats</title>
</head>
<body>
<h1>Dog to Cat Magic!</h1>
<div class="container">
    <img id ="whiteLab" src="whiteLab.jpg" alt="White Lab">
    <img id ="waterDog" src="waterDog.jpg" alt="Water Dog">
    <img id ="spanielBall" src="spanielBall.jpg" alt="Spaniel with a 
ball">
    <img id="glassesDog" src="glassesDog.jpg" alt="Dog with glasses">
    <img id="brownLab" src="brownLab.jpg" alt="Brown Lab">
    <img id="tiredDog" src="tiredDog.jpg" alt="Tired dog">
 </div>
 <script src="newdogs.js"></script>
 </body>
</html>


let whiteLab = document.getElementById("whiteLab");
let whiteLabImage = "whiteLab.jpg";
let fatCat = "fatCat.jpg";
let image_tracker = "whiteLab";

let waterDog = document.getElementById("waterDog");
let waterDogImage = "waterDog.jpg";
let travelCat = "travelCat.jpg";

let spanielBall = document.getElementById("spanielBall");
let spanielBallImage = "spanielBall.jpg";
let giveMeCat = "giveMeCat.jpg";

let glassesDog = document.getElementById("glassesDog");
let glassesDogImage = "glassesDog.jpg";
let noEarsCat = "noEarsCat.jpg";

let brownLab = document.getElementById("brownLab");
let brownLabImage = "brownLab.jpg";
let butterFly = "catButteryfly.jpg";

let tiredDog = document.getElementById("tiredDog");
let tiredDogImage = "tiredDog.jpg";
let smilingCat = "smilingCat.jpg"

function dogClicker(imgTrck, dogsrc, dogImage, catImage) {
if (imgTrck == "whiteLab") {
  dogsrc.src = catImage;
  image_tracker = "fatCat";
} else {
  dogsrc.src = dogImage;
  image_tracker = "whiteLab";
}
} 

whiteLab.addEventListener("click", function() {
dogClicker(image_tracker, whiteLab, whiteLabImage, fatCat);
 });

waterDog.addEventListener("click", function(){
  dogClicker(image_tracker, waterDog, waterDogImage, travelCat);
} );

spanielBall.addEventListener("click", function(){
dogClicker(image_tracker, spanielBall, spanielBallImage, giveMeCat)
});

glassesDog.addEventListener("click", function(){
    dogClicker(image_tracker, glassesDog, glassesDogImage, noEarsCat)
});

brownLab.addEventListener("click", function(){
    dogClicker(image_tracker, brownLab, brownLabImage, butterFly)
});

tiredDog.addEventListener("click", function (){
    dogClicker(image_tracker, tiredDog, tiredDogImage, smilingCat)
});

折射式onclick功能无法运行

3 个答案: