当用户选择一个选项、导航离开或选择相同的选项时，如何隐藏元素？

debugcn 发表于 Dev

扎克·哈里奥特

我正在练习一些JQuery，并且正在开发一个简单的应用程序，询问用户他们最喜欢的食物和饮料是什么。

我正在尝试创建应用程序，以便生成的文本...“您最喜欢的食物是 x，饮料是 y”，仅在用户实际选择了他们最喜欢的食物/饮料以及他们没有主动选择时显示。

我的问题是，我无法弄清楚如何在用户选择选项时隐藏结果文本，这种方式还可以在进行选择后显示文本。我使用了一个 change() 方法，它允许我在他们选择新内容时显示文本。但是如果用户点击离开，或者选择相同的选项呢？

想法？

这是代码...

http://codepen.io/zharriott/pen/oZxvBO?editors=1011

$(document).ready(() => {
  /******************
  REFERENCES
  ******************/
  const $foodSelector = $('.questions__q1'),
      $drinkSelector = $('.questions__q2'),
      $dropdownInputs = $('.questions select'),
      $foodResultTxt = $('.result__fav-food'),
      $drinkResultTxt = $('.result__fav-drink'),
      $result = $('.result'),
      $resultTxt = $result.text();

  /******************/
  $dropdownInputs.change(() => {
    //IF food/drink has not been selected, leave result hidden
    if ( $foodSelector.find(':selected').text() === 'Select an option...' || $drinkSelector.find(':selected').text() === 'Select an option...' ) {} 
    else {
      //Update and show result to display user's current answers
      $foodResultTxt.text($foodSelector.find(':selected').text());
      $drinkResultTxt.text($drinkSelector.find(':selected').text());
      console.log($resultTxt);
      $result.show(1400);
    }
  });
});

想法？

斯特凡诺·扎尼尼

您可以考虑将输入的当前值与focus事件一起保存，然后将选定的值change与前一个值和占位符进行比较。

$dropdownInputs.focus(function(){
    var oldFoodValue = $foodSelector.find(':selected').text();
    var oldDrinkValue = $drinkSelector.find(':selected').text();
}).change(() => {
    //IF food/drink has not been selected or is equal to the previous value, leave result hidden
    if ( $foodSelector.find(':selected').text() === 'Select an option...' ||
         $drinkSelector.find(':selected').text() === 'Select an option...' ||
         $foodSelector.find(':selected').text() === oldFoodValue ||
         $drinkSelector.find(':selected').text() === oldDrinkValue) {} 
    else {
      //Update and show result to display user's current answers
      $foodResultTxt.text($foodSelector.find(':selected').text());
      $drinkResultTxt.text($drinkSelector.find(':selected').text());
      console.log($resultTxt);
      $result.show(1400);
    }
  });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。