Javascript onclick、onmouseout冲突、循环

我是新来的，这是我在stackflow中的第一个“提问：）这是我的代码。 其主要思想是：

默认情况下，图标为白色

mouseover和mouseout，它们一起工作就像css中的“hover”。我不能将hover与css一起使用，因为图像是.png，所以必须将js与此一起使用。

图标onclick变为灰色，看起来像被激活了 虽然我以一种不聪明的方式使代码变得非常复杂，但代码仍然有效。有没有办法让它变得更简单？使用循环？？但是怎么做呢？提前谢谢

var clickedWalk=false；
var clickedBicycle=false；
var clickedCar=false；
var clickedBus=false；
var clickedParkAndRide=false；
函数mouseOverWalk（）{
document.getElementById（“walk”）.src=“images/walk gray.png”；
}
函数mouseOverBicycle（）{
document.getElementById（“bicycle”）.src=“images/Biking gray.png”；
}
函数mouseOverCar（）{
document.getElementById（“car”）.src=“images/car-gray.png”；
}
函数mouseOverBus（）{
document.getElementById（“bus”）.src=“images/bus-gray.png”；
}
功能鼠标越过ParkAndRide（）{
document.getElementById（“停车换乘”）.src=“images/PPlusBus gray.png”；
}
函数mouseOutWalk（）{
如果（clickedWalk==false）{
document.getElementById（“walk”）.src=“images/walk.png”；//鼠标输出有效
}
clickedWalk=false；
}
函数mouseOutBicycle（）{
如果（clickedBicycle==false）{//no单击
document.getElementById（“bicycle”）.src=“images/Biking.png”；//鼠标输出有效
}
clickedBicycle=false；
}
函数mouseOutCar（）{
如果（clickedCar==false）{//否单击
document.getElementById（“car”）.src=“images/car.png”；//鼠标输出有效
}
clickedCar=false；
}
函数mouseOutBus（）{
如果（clickedBus==false）{//no单击
document.getElementById（“bus”）.src=“images/bus.png”；//鼠标输出有效
}
clickedBus=false；
}
函数mouseOutParkAndRide（）{
如果（clickedParkAndRide==false）{//no单击
document.getElementById（“停车换乘”）.src=“images/PPlusBus.png”；//鼠标输出有效
}
单击驻车行驶=错误；
}
函数clickWalk（）{
document.getElementById（“walk”）.src=“images/walk gray.png”；//gray
document.getElementById（“bicycle”）.src=“images/Biking.png”；//白色
document.getElementById（“car”）.src=“images/car.png”；//白色
document.getElementById（“bus”）.src=“images/bus.png”；//白色
document.getElementById（“停车换乘”）.src=“images/PPlusBus.png”；//白色
clickedWalk=true；
}
函数clickBicycle（）{
document.getElementById（“walk”）.src=“images/walk.png”；//白色
document.getElementById（“bicycle”）.src=“images/Biking gray.png”；//gray
document.getElementById（“car”）.src=“images/car.png”；//白色
document.getElementById（“bus”）.src=“images/bus.png”；//白色
document.getElementById（“停车换乘”）.src=“images/PPlusBus.png”；//白色
clickedBicycle=true；
}
函数clickCar（）{
document.getElementById（“walk”）.src=“images/walk.png”；//白色
document.getElementById（“bicycle”）.src=“images/Biking.png”；//白色
document.getElementById（“car”）.src=“images/car-gray.png”；//gray
document.getElementById（“bus”）.src=“images/bus.png”；//白色
document.getElementById（“停车换乘”）.src=“images/PPlusBus.png”；//白色
clickedCar=true；
}
函数clickBus（）{
document.getElementById（“walk”）.src=“images/walk.png”；//白色
document.getElementById（“bicycle”）.src=“images/Biking.png”；//白色
document.getElementById（“car”）.src=“images/car.png”；//白色
document.getElementById（“bus”）.src=“images/bus-gray.png”；//gray
document.getElementById（“停车换乘”）.src=“images/PPlusBus.png”；//白色
clickedBus=true；
}
功能单击驻车和骑乘（）{
document.getElementById（“walk”）.src=“images/walk.png”；//白色
document.getElementById（“bicycle”）.src=“images/Biking.png”；//白色
document.getElementById（“car”）.src=“images/car.png”；//白色
document.getElementById（“bus”）.src=“images/bus.png”；//白色
document.getElementById（“停车换乘”）.src=“images/PPlusBus gray.png”；//gray
单击驻车行驶=真；
}

实际上，您可以在css中使用“悬停”。简单地说，将“li”设置为具有适当高度和宽度的块元素，并向其添加“id”属性，就像使用“img”一样。 然后删除“img”元素，并使用css设置“li”的样式

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

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

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

---

简化代码的一种可能方法可以如下进行：

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

 <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>

那么您的html应该是这样的：

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

 <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>

---

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

一种简化代码的可能方法可以如下进行：

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

 <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>

那么您的html应该是这样的：

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

 <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>

我没有尝试，也许我犯了一些错误，但我想你明白了