Question

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

我试图创建应用程序，以便生成的文本...＆＃34;您最喜欢的食物是x，饮料是y＆＃34;，只显示用户实际选择了他们喜欢的食物/喝酒，当他们没有积极选择时。

我的问题是，我无法弄清楚如何在用户选择选项时隐藏生成的文本，同时还能够在选择完成后显示文本。我使用了一个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);
    }
  });
});

思想？

Answer 1

您可以考虑使用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);
    }
  });

Answer 2

$foodResultTxt.hide();

当需要显示时：

$foodResultTxt.show();

如何在用户选择选项，导航或选择相同选项时隐藏元素？

2 个答案: