當用戶選擇一個選項，導航或選擇相同的選項時，如何隱藏元素？

我練習一些jQuery和我工作的一個簡單的應用程序，要求用戶有什麼自己喜歡的食物和飲料的。當用戶選擇一個選項，導航或選擇相同的選項時，如何隱藏元素？

我試圖創建應用程序，以便生成的文本......「你最喜歡的食物是x和飲料爲y」，只能說明當用戶實際選擇自己喜歡的食物/飲料，當他們AREN不主動選擇。

我的問題是，我無法弄清楚如何隱藏生成的文本在用戶選擇的選項，因爲也有顯示文本一旦選擇由能力的方式。我使用了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); 
    } 
    }); 
});

的思考？

來源

2017-03-03 Zach Harriott

試試？ – Feathercrown

可以考慮與focus事件節省了輸入的電流值，然後同時與前一個和佔位change後所選擇的值進行比較。使用`focus`和`blur`事件

$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); 
    } 
    });

來源

2017-03-03 13:48:52

編輯，以便它註冊了兩個輸入初始值和把他們都考慮當有些變化 –

這是一個偉大的想法，我想與其他的想法，我只是有可能工作相結合。我要去當用戶集中於選擇，然後選擇元素點擊處理程序中對整個文檔點擊處理程序來記錄選擇的價值。如果用戶點擊文檔中的任何地方（包括另一個答案），那麼我會檢查是否應該更新和顯示答案......您是否預見到此解決方案的任何問題？感謝您的幫助btw！ –

-1

$foodResultTxt.hide();

，並在需要時顯示：

$foodResultTxt.show();

來源

2017-03-03 13:46:29 maximelian1986

不正是我在找什麼，雖然-1不是我。我仍然欣賞嘗試笑 –

當用戶選擇一個選項，導航或選擇相同的選項時，如何隱藏元素？

回答

相關問題