gpt4 book ai didi

Javascript onclick、onmouseout 冲突、循环

转载 作者:行者123 更新时间:2023-11-28 05:46:32 25 4
gpt4 key购买 nike

我是新来的,这是我在 stackflow 中的第一次“询问”:)这是我的代码。主要思想是:

  1. 图标默认为白色
  2. mouseover 和 mouseout,它们一起工作就像 css 中的“hover”。我无法在 css 中使用悬停,因为图像是 .png,因此必须使用 js。
  3. 图标 onclick 变为灰色,看起来像是已激活。

尽管我以一种不聪明的方式使它变得非常复杂,但该代码仍然有效。有什么办法可以让它变得更简单吗?使用循环??但如何呢?提前致谢!

var clickedWalk = false;
var clickedBicycle = false;
var clickedCar = false;
var clickedBus = false;
var clickedParkAndRide = false;

function mouseOverWalk() {
document.getElementById("walk").src="images/Walk-gray.png";
}

function mouseOverBicycle() {
document.getElementById("bicycle").src="images/Biking-gray.png";
}

function mouseOverCar() {
document.getElementById("car").src="images/Car-gray.png";
}

function mouseOverBus() {
document.getElementById("bus").src="images/Bus-gray.png";
}

function mouseOverParkAndRide() {
document.getElementById("park-and-ride").src="images/PPlusBus-gray.png";
}



function mouseOutWalk() {
if (clickedWalk == false) {
document.getElementById("walk").src = "images/Walk.png"; //mouseout works
}
clickedWalk = false;
}

function mouseOutBicycle() {
if (clickedBicycle == false) { //no click
document.getElementById("bicycle").src = "images/Biking.png"; //mouseout works
}
clickedBicycle = false;
}

function mouseOutCar() {
if (clickedCar == false) { //no click
document.getElementById("car").src = "images/Car.png"; //mouseout works
}
clickedCar = false;
}

function mouseOutBus() {
if (clickedBus == false) { //no click
document.getElementById("bus").src = "images/Bus.png"; //mouseout works
}
clickedBus = false;
}

function mouseOutParkAndRide() {
if (clickedParkAndRide == false) { //no click
document.getElementById("park-and-ride").src = "images/PPlusBus.png"; //mouseout works
}
clickedParkAndRide = false;
}

function clickWalk() {
document.getElementById("walk").src="images/Walk-gray.png"; //gray
document.getElementById("bicycle").src="images/Biking.png"; //white
document.getElementById("car").src="images/Car.png"; //white
document.getElementById("bus").src="images/Bus.png"; //white
document.getElementById("park-and-ride").src="images/PPlusBus.png"; //white

clickedWalk = true;
}

function clickBicycle() {

document.getElementById("walk").src="images/Walk.png"; //white
document.getElementById("bicycle").src="images/Biking-gray.png"; //gray
document.getElementById("car").src="images/Car.png"; //white
document.getElementById("bus").src="images/Bus.png"; //white
document.getElementById("park-and-ride").src="images/PPlusBus.png"; //white

clickedBicycle = true;
}

function clickCar() {
document.getElementById("walk").src="images/Walk.png"; //white
document.getElementById("bicycle").src="images/Biking.png"; //white
document.getElementById("car").src="images/Car-gray.png"; //gray
document.getElementById("bus").src="images/Bus.png"; //white
document.getElementById("park-and-ride").src="images/PPlusBus.png"; //white

clickedCar = true;
}

function clickBus() {
document.getElementById("walk").src="images/Walk.png"; //white
document.getElementById("bicycle").src="images/Biking.png"; //white
document.getElementById("car").src="images/Car.png"; //white
document.getElementById("bus").src="images/Bus-gray.png"; //gray
document.getElementById("park-and-ride").src="images/PPlusBus.png"; //white

clickedBus = true;
}

function clickParkAndRide() {
document.getElementById("walk").src="images/Walk.png"; //white
document.getElementById("bicycle").src="images/Biking.png"; //white
document.getElementById("car").src="images/Car.png"; //white
document.getElementById("bus").src="images/Bus.png"; //white
document.getElementById("park-and-ride").src="images/PPlusBus-gray.png"; //gray

clickedParkAndRide = true;
}
<div id="modeListBoxSelect">
<ul>
<li onclick="travelMode.byWalk()"><img id="walk" onmouseover="mouseOverWalk()" onmouseout="mouseOutWalk()" onclick="clickWalk()" src="images/Walk.png" alt="walk"</li>
<li onclick="travelMode.byBike()"><img id="bicycle" onmouseover="mouseOverBicycle()" onmouseout="mouseOutBicycle()" onclick="clickBicycle()" src="images/Biking.png" alt="bicycle"</li>
<li onclick="travelMode.byCar()"><img id="car" onmouseover="mouseOverCar()" onmouseout="mouseOutCar()" onclick="clickCar()" src="images/Car.png" alt="car"</li>
<li onclick="travelMode.byBus()"><img id="bus" onmouseover="mouseOverBus()" onmouseout="mouseOutBus()" onclick="clickBus()" src="images/Bus.png" alt="bus"</li>
<li onclick="travelMode.byParkAndRide()"><img id="park-and-ride" onmouseover="mouseOverParkAndRide()" onmouseout="mouseOutParkAndRide()" onclick="clickParkAndRide()" src="images/PPlusBus.png" alt="park-and-ride"</li>
</ul>
</div>

最佳答案

实际上,您可以在CSS中使用“hover”。简单地说,将“li”设置为具有适当高度和宽度的 block 元素,并向其添加“id”属性,就像对“img”所做的那样。然后删除“img”元素并使用 css 来设置“li”的样式。

<div id="modeListBoxSelect">
<ul>
<li onclick="travelMode.byWalk()" id="walk"></li>
</ul>
</div>

和CSS:

#walk {
display: block;
width: XXXpx;
height: YYYpx; // size of the image
background-image: url('your-image.png');
}
#walk:hover {
background-image: url('your-image-after-hover.png');
}

关于Javascript onclick、onmouseout 冲突、循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38477688/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com