Javascript onclick，onmouseout冲突，循环

Question

我是新来的，这是我的第一个＆＃34;问＆＃34;在stackflow :)这是我的代码。 主要想法是：

1. 默认情况下图标为白色
2. mouseover和mouseout，它们一起工作，就像＆＃34; hover＆＃34;在css。我不能在css中使用hover，因为图像是.png，所以必须使用js。
   
3. 图标onclick更改为灰色，看起来像是已激活。

代码工作，虽然我以一种不聪明的方式使它变得非常复杂。有没有办法让它变得更简单？使用循环？但是怎么样？提前谢谢！

＆＃13;
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

实际上，你可以使用＆＃39; hover＆＃39;在css。简单地说，＆＃39; li＆＃39;作为具有适当高度和高度的块元素宽度，并添加＆＃39; id＆＃39;归因于它，就像你使用＆＃39; img＆＃39;一样。 然后删除＆＃39; img＆＃39;元素和使用CSS来塑造＆＃39; li＆＃39;。

<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');
}

Answer 2

简化代码的一种可能方法可以像这样继续：

  var imagesSrc = {
    'walk': {
      'white': 'images/Walk.png',
      'gray': 'images/Walk-gray.png'
    },
    'bicycle': {
      'white': 'images/Biking.png',
      'gray': 'images/Biking-gray.png'
    },
    'car': {
      'white': 'images/Car.png',
      'gray': 'images/Car-gray.png'
    },
    'bus': {
      'white': 'images/Car.png',
      'gray': 'images/Car-gray.png'
    },
    'park-and-ride': {
      'white': 'images/PPlusBus.png',
      'gray': 'images/PPlusBus-gray.png'
    }
  };

  //Save the clicked image into this variable
  var clickedImage;

  function mouseOver(img) {
    img.src = imagesSrc[img.id].gray;
  }

  function mouseOut(img) {
    if(img !== clickedImage) {
      img.src = imagesSrc[img.id].white;
    }
  }

  function click(img) {
    //previous clicked image back to white
    clickedImage.src = imagesSrc[clickedImage.id].white;
    //current clicked image to gray
    img.src = imagesSrc[img.id].gray;
    //save the current clicked image
    clickedImage = img;
  }

然后你的html应该是这样的：

 <div id="modeListBoxSelect">
    <ul>
    <li onclick="travelMode.byWalk()"><img id="walk" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="click(this)" src="images/Walk.png" alt="walk"</li>
    <li onclick="travelMode.byBike()"><img id="bicycle" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="click(this)" src="images/Biking.png" alt="bicycle"</li>
    <li onclick="travelMode.byCar()"><img id="car" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="click(this)" src="images/Car.png" alt="car"</li>
    <li onclick="travelMode.byBus()"><img id="bus" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="click(this)" src="images/Bus.png" alt="bus"</li>
    <li onclick="travelMode.byParkAndRide()"><img id="park-and-ride" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="click(this)" src="images/PPlusBus.png" alt="park-and-ride"</li>
    </ul>
  </div>

我没有尝试也许我犯了一些错误，但我认为你看到了这个想法