Question

下面的代码遍历具有.removeFood类的项目的列表。如果单击的食物名称与列表中的项目匹配，则将其替换为空白文本。

示例列表：
玉米片
薯条
玉米片
汉堡包
玉米片

问题： 如果列表中有重复项，它将删除所有匹配项。因此，在上面的列表中，它将删除所有3个“玉米片”-如何仅删除第一个匹配项？

    $(".removeFood").click(function() {    
        $(this).text('')     
        if (food1.trim() == removeThis.trim()){
           $("#newFoodName1" ).text('')
        }        
        if (food2.trim() == removeThis.trim()){
           $("#newFoodName2" ).text('')
        }         
        if (food3.trim() == removeThis.trim()){
           $("#newFoodName3" ).text('')
        }         
        if (food4.trim() == removeThis.trim()){
           $("#newFoodName4" ).text('')
        }        
        if (food5.trim() == removeThis.trim()){
           $("#newFoodName5" ).text('')        
        }        
    })

Answer 1

在代码中的连续ifs中使用“ else if”。如果所有条件均为“如果”，它将执行所有条件。

Answer 2

使用switch代替if可以更好地使用相同数量的变量，数量更多

$(".removeFood").click(function() {
  $(this).text('')
  switch (removeThis.trim()) {
    case food1.trim():
      $("#newFoodName1").text('')
      break;
      // like wise
  }
})

jQuery-仅删除匹配的文本一次

2 个答案: