Question

我有一个输入，用户可以在其中搜索 pantone 颜色。如果输入值与 pantone 名称匹配，则该 pantone 信息会显示在 dom 中。

我遇到的问题是当用户输入一个不在数据库中的数字时，以前的数据保留在 dom 中并且没有被清除。我想给用户一个消息，他们正在搜索的颜色不在数据库中，并清除以前的数据。

这是我用来触发搜索的代码

var pantone_data = (data) //data is the json from another file im importing
$('#pantoneSearch').focusout(function() {
  var pantoneSearchText = parseInt($('#pantoneSearch').val());
  // console.log(pantone_data)
  $.each(pantone_data, function(i, obj) {
    if (pantoneSearchText == obj.name) {
      console.log("it sure does")
      $('#pantoneTitle').empty();
      $('.card-body span').empty();

      $('#pantoneTitle').append($('<h3>Pantone ' + obj.name + '</h3>'));

      $('#stock1').append($('<p>Stock Name: ' + obj.s1_name + '</p>'));
      $('#stock1').append($('<p>Stock Catagory: ' + obj.s1_catagory + '</p>'));
      $('#stock1').append($('<p>Pantone Match: ' + obj.s1_pantone_match + '</p>'));
      $('#stock1').append($('<p>Delta: ' + obj.s1_delta + '</p>'));

      $('#stock2').append($('<p>Stock Name: ' + obj.s2_name + '</p>'));
      $('#stock2').append($('<p>Stock Catagory: ' + obj.s2_catagory + '</p>'));
      $('#stock2').append($('<p>Pantone Match: ' + obj.s2_pantone_match + '</p>'));
      $('#stock2').append($('<p>Delta: ' + obj.s2_delta + '</p>'));
      return;
    } else {
      console.clear()
      console.log("nope")
      $('.card-body span').empty();
      return;
    }
  });
});

这里是数据的 JSON

var data = 
[
    {   
        "id":"11",
        "name":"11",
        "s1_name":"SG12345",
        "s1_catagory":"Semigloss",
        "s1_pantone_match":"true",
        "s1_delta":">2",
        "s2_name":"SP54321",
        "s2_catagory":"SilerMax",
        "s2_pantone_match":"false",
        "s2_delta":"<5"
    },
    {   
        "id":"22",
        "name":"22",
        "s1_name":"ZZ00000",
        "s1_catagory":"Semigloss",
        "s1_pantone_match":"true",
        "s1_delta":">21",
        "s2_name":"YY1111111",
        "s2_catagory":"SilerMax",
        "s2_pantone_match":false,
        "s2_delta":"<100"
    }
]

现在发生的事情是它似乎跳过了 if 语句条件并直接进入 else 语句，清除了“.card-body span”中的所有内容。如果 pantoneSearchText 与任何 pantone 名称不匹配，我需要弄清楚如何设置条件，清除内容并添加消息。

希望这很清楚。

Answer 1

在开始搜索之前清除之前的数据。

然后，当您搜索时，一旦找到匹配项（假设只能有一个匹配项），请使用 return false 结束 $.each() 循环。

在搜索时，设置一个变量以指示找到匹配项。循环结束后，检查变量并在未找到任何内容时显示相应消息。

var pantone_data = (data) //data is the json from another file im importing
$('#pantoneSearch').focusout(function() {
  var pantoneSearchText = parseInt($('#pantoneSearch').val());
  // console.log(pantone_data)
  var found = false;
  $('#pantoneTitle').empty();
  $('.card-body span').empty();
  $.each(pantone_data, function(i, obj) {
    if (pantoneSearchText == obj.name) {
      console.log("it sure does")
      $('#pantoneTitle').append($('<h3>Pantone ' + obj.name + '</h3>'));

      $('#stock1').append($('<p>Stock Name: ' + obj.s1_name + '</p>'));
      $('#stock1').append($('<p>Stock Catagory: ' + obj.s1_catagory + '</p>'));
      $('#stock1').append($('<p>Pantone Match: ' + obj.s1_pantone_match + '</p>'));
      $('#stock1').append($('<p>Delta: ' + obj.s1_delta + '</p>'));

      $('#stock2').append($('<p>Stock Name: ' + obj.s2_name + '</p>'));
      $('#stock2').append($('<p>Stock Catagory: ' + obj.s2_catagory + '</p>'));
      $('#stock2').append($('<p>Pantone Match: ' + obj.s2_pantone_match + '</p>'));
      $('#stock2').append($('<p>Delta: ' + obj.s2_delta + '</p>'));
      found = true;
      return false;
    }
  });
  if (!found) {
    console.clear();
    console.log("nope");
  }
});

Answer 2

您想搜索 json 数据，如果找到对象则更新 DOM，如果未找到则清除以前的数据。

var pantone_data = (data) //data is the json from another file im importing
$('#pantoneSearch').focusout(function() {
  var pantoneSearchText = parseInt($('#pantoneSearch').val());
  let found_obj = pantone_data.find(obj => pantoneSearchText == obj.name)
  if (found_obj){
    //update dom
  } else {
    //clear dom
  }
}

您似乎已经有了更新 dom 的代码。

为了清除它 - 您可以使用 $('#stock1').empty() 等...删除所有子项如果您想让用户知道alert('No matching color found')

，甚至可以发出警报

如果您想继续使用 $each 函数，那么您需要确保在成功找到对象后中断；要在 jquery 中做到这一点，回调函数需要返回 false。所以是这样的：

$.each(pantone_data, function(i, obj) {
  if (pantoneSearchText == obj.name) {
    //update the DOM
    return false;
  } else {
    //clear the DOM
    return;}
  }

它将为您的 json 数据中的每个对象清除 DOM，直到它遇到搜索到的对象或数组的末尾。这可能不是很有效，尤其是当您的 json 数据很大时。因此建议使用上面的 .find。

If/Else 语句问题

2 个答案: