使用javascript更改多个类和ID是否有比这更好的方法？

我在一个网站上创建了一个膳食定制功能，客户可以选择各种不同的配料来配置他们的膳食。我的后端工作得很好，但前端有点问题

我使用了各种id、类和函数来创建悬停覆盖，然后单击（选中）食物图像后在其周围应用边框，但这是一个相当长的方法。它是有效的，但由于有比这个（另外30个）更多的成分，我有点担心功能变得太长

HTML

<img id="food" onclick="select()" src="https://website.com/uploads/2020/03/Curried-Chicken-Breast-1-scaled.jpg" style="width:250px;">

<img id="food1" onclick="select1()" src="https://website.com/uploads/2020/03/Curried-Chicken-Breast-1-scaled.jpg" style="width:250px;">

<div id="Group-Images">
  <img id="food1" src="Curried-Chicken-Breast-1-scaled.jpg" >
  <img id="food2" src="Curried-Chicken-Breast-2-scaled.jpg" >
  <img id="food3" src="Curried-Chicken-Breast-3-scaled.jpg" >
</div>

JavaScript

<script>
function select(){
    document.getElementById("food").classList.add('selected');
    document.getElementById("food1").classList.remove('selected');
    document.getElementById("food2").classList.remove('selected');
    document.getElementById("food3").classList.remove('selected');
    document.getElementById("food4").classList.remove('selected');
    document.getElementById("food5").classList.remove('selected');
    document.getElementById("food6").classList.remove('selected');
    document.getElementById("food7").classList.remove('selected');
}

function select1(){
    document.getElementById("food").classList.remove('selected');
    document.getElementById("food1").classList.add('selected');
    document.getElementById("food2").classList.remove('selected');
    document.getElementById("food3").classList.remove('selected');
    document.getElementById("food4").classList.remove('selected');
    document.getElementById("food5").classList.remove('selected');
    document.getElementById("food6").classList.remove('selected');
    document.getElementById("food7").classList.remove('selected');
}

function select2(){
    document.getElementById("food").classList.remove('selected');
    document.getElementById("food1").classList.remove('selected');
    document.getElementById("food2").classList.add('selected');
    document.getElementById("food3").classList.remove('selected');
    document.getElementById("food4").classList.remove('selected');
    document.getElementById("food5").classList.remove('selected');
    document.getElementById("food6").classList.remove('selected');
    document.getElementById("food7").classList.remove('selected');
}

function select3(){
    document.getElementById("food").classList.remove('selected');
    document.getElementById("food1").classList.remove('selected');
    document.getElementById("food2").classList.remove('selected');
    document.getElementById("food3").classList.add('selected');
    document.getElementById("food4").classList.remove('selected');
    document.getElementById("food5").classList.remove('selected');
    document.getElementById("food6").classList.remove('selected');
    document.getElementById("food7").classList.remove('selected');
}

function select4(){
    document.getElementById("food").classList.remove('selected');
    document.getElementById("food1").classList.remove('selected');
    document.getElementById("food2").classList.remove('selected');
    document.getElementById("food3").classList.remove('selected');
    document.getElementById("food4").classList.add('selected');
    document.getElementById("food5").classList.remove('selected');
    document.getElementById("food6").classList.remove('selected');
    document.getElementById("food7").classList.remove('selected');
}

function select5(){
    document.getElementById("food").classList.remove('selected');
    document.getElementById("food1").classList.remove('selected');
    document.getElementById("food2").classList.remove('selected');
    document.getElementById("food3").classList.remove('selected');
    document.getElementById("food4").classList.remove('selected');
    document.getElementById("food5").classList.add('selected');
    document.getElementById("food6").classList.remove('selected');
    document.getElementById("food7").classList.remove('selected');
}

function select6(){
    document.getElementById("food").classList.remove('selected');
    document.getElementById("food1").classList.remove('selected');
    document.getElementById("food2").classList.remove('selected');
    document.getElementById("food3").classList.remove('selected');
    document.getElementById("food4").classList.remove('selected');
    document.getElementById("food5").classList.remove('selected');
    document.getElementById("food6").classList.add('selected');
    document.getElementById("food7").classList.remove('selected');
}

function select7(){
    document.getElementById("food").classList.remove('selected');
    document.getElementById("food1").classList.remove('selected');
    document.getElementById("food2").classList.remove('selected');
    document.getElementById("food3").classList.remove('selected');
    document.getElementById("food4").classList.remove('selected');
    document.getElementById("food5").classList.remove('selected');
    document.getElementById("food6").classList.remove('selected');
    document.getElementById("food7").classList.add('selected');
}
</script>

函数选择（）{
document.getElementById（“food”）.classList.add（“selected”）；
document.getElementById（“food1”）.classList.remove（'selected'）；
document.getElementById（“food2”）.classList.remove（'selected'）；
document.getElementById（“food3”）.classList.remove（'selected'）；
document.getElementById（“food4”）.classList.remove（'selected'）；
document.getElementById（“food5”）.classList.remove（“selected”）；
document.getElementById（“food6”）.classList.remove（'selected'）；
document.getElementById（“food7”）.classList.remove（“selected”）；
}
函数select1（）{
document.getElementById（“food”）.classList.remove（“selected”）；
document.getElementById（“food1”）.classList.add（'selected'）；
document.getElementById（“food2”）.classList.remove（'selected'）；
document.getElementById（“food3”）.classList.remove（'selected'）；
document.getElementById（“food4”）.classList.remove（'selected'）；
document.getElementById（“food5”）.classList.remove（“selected”）；
document.getElementById（“food6”）.classList.remove（'selected'）；
document.getElementById（“food7”）.classList.remove（“selected”）；
}
函数select2（）{
document.getElementById（“food”）.classList.remove（“selected”）；
document.getElementById（“food1”）.classList.remove（'selected'）；
document.getElementById（“food2”）.classList.add（'selected'）；
document.getElementById（“food3”）.classList.remove（'selected'）；
document.getElementById（“food4”）.classList.remove（'selected'）；
document.getElementById（“food5”）.classList.remove（“selected”）；
document.getElementById（“food6”）.classList.remove（'selected'）；
document.getElementById（“food7”）.classList.remove（“selected”）；
}
函数select3（）{
document.getElementById（“food”）.classList.remove（“selected”）；
document.getElementById（“food1”）.classList.remove（'selected'）；
document.getElementById（“food2”）.classList.remove（'selected'）；
document.getElementById（“food3”）.classList.add（'selected'）；
document.getElementById（“food4”）.classList.remove（'selected'）；
document.getElementById（“food5”）.classList.remove（“selected”）；
document.getElementById（“food6”）.classList.remove（'selected'）；
document.getElementById（“food7”）.classList.remove（“selected”）；
}
函数select4（）{
document.getElementById（“food”）.classList.remove（“selected”）；
document.getElementById（“food1”）.classList.remove（'selected'）；
document.getElementById（“food2”）.classList.remove（'selected'）；
document.getElementById（“food3”）.classList.remove（'selected'）；
document.getElementById（“food4”）.classList.add（'selected'）；
document.getElementById（“food5”）.classList.remove（“selected”）；
document.getElementById（“food6”）.classList.remove（'selected'）；
document.getElementById（“food7”）.classList.remove（“selected”）；
}
函数select5（）{
document.getElementById（“food”）.classList.remove（“selected”）；
document.getElementById（“food1”）.classList.remove（'selected'）；
document.getElementById（“food2”）.classList.remove（'selected'）；
document.getElementById（“food3”）.classList.remove（'selected'）；
document.getElementById（“food4”）.classList.remove（'selected'）；
document.getElementById（“food5”）.classList.add（'selected'）；
document.getElementById（“food6”）.classList.remove（'selected'）；
document.getElementById（“food7”）.classList.remove（“selected”）；
}
函数select6（）{
document.getElementById（“food”）.classList.remove（“selected”）；
document.getElementById（“food1”）.classList.remove（'selected'）；
document.getElementById（“food2”）.classList.remove（'selected'）；
document.getElementById（“food3”）.classList.remove（'selected'）；
document.getElementById（“food4”）.classList.remove（'selected'）；
document.getElementById（“food5”）.classList.remove（“selected”）；
document.getElementById（“food6”）.classList.add（'selected'）；
document.getElementById（“food7”）.classList.remove（“selected”）；
}
函数select7（）{
document.getElementById（“food”）.classList.remove（“selected”）；
document.getElementById（“food1”）.classList.remove（'selected'）；
document.getElementById（“food2”）.classList.remove（'selected'）；
document.getElementById（“food3”）.classList.remove（'selected'）；
document.getElementById（“food4”）.classList.remove（'selected'）；
document.getElementById（“food5”）.classList.remove（“selected”）；
document.getElementById（“food6”）.classList.remove（'selected'）；
document.getElementById（“food7”）.classList.add（'selected'）；
}

---

您可以随时将其作为一种功能

function select( val ){

    for (let i = 0; i < 7; ++i){
        document.getElementById(`food${i}`).classList.remove('selected');
    } 

    document.getElementById(`food${val}`).classList.add('selected');
}

// select(1)

功能选择（val）{
for（设i=0；i<7；++i）{
document.getElementById（`food${i}`）.classList.remove（'selected'）；
} 
document.getElementById（`food${val}`）.classList.add（'selected'）；
}
//选择（1）

使用类似选择器的类：

<img class="food" onclick="select(this)" src="https://website.com/uploads/2020/03/Curried-Chicken-Breast-1-scaled.jpg" style="width:250px;">

<img class="food" onclick="select1(this)" src="https://website.com/uploads/2020/03/Curried-Chicken-Breast-1-scaled.jpg" style="width:250px;">

JavaScript将如下所示：

<script>
$food_els = document.getElementByClassName("food");
function select(e) {
    for (var i = 0; i < $food_els.length; i++) {
        if ($food_els[i] == e) {
            $food_els[i].classList.add("selected");
        }
        else {
            $food_els[i].classList.remove("selected");
        }
    }
}
</script>

$food_els=document.getElementByClassName（“food”）；
功能选择（e）{
对于（变量i=0；i<$food_els.length；i++）{
如果（$food_els[i]==e）{
$food_els[i].classList.add（“selected”）；
}
否则{
$food_els[i].classList.remove（“selected”）；
}
}
}

您必须使用
-更好的CSS
-组图像的div
-活动委派

HTML<div id="Group-Images"> <img id="food1" src="Curried-Chicken-Breast-1-scaled.jpg" > <img id="food2" src="Curried-Chicken-Breast-2-scaled.jpg" > <img id="food3" src="Curried-Chicken-Breast-3-scaled.jpg" > </div>

#Group-Images > img {
  width: 250px;
}
#Group-Images > img:hover {
  filter: brightness(75%) !important;
}
#Group-Images > img.selected {
  border: 3px solid #186472 !important;
}

const GroupImages = document.getElementById('Group-Images')
  ,   AllImages   = GroupImages.querySelectorAll('img')
  ;
GroupImages.onclick=e=>
  {
  if (!e.target.matches('img')) return

  // console.log( e.target.id) // --> food1, food2,... foodN

  AllImages.forEach(imh=>
    {
    if (img===e.target) { img.classList.add('selected')   }
    else                { img.classList.remove('selected') }
    })
  }