jQuery - 選択とオプションの入力、より良い方法ですか？

Question

まず、私のフィドルを見てください：my Fiddle

もっと簡単な方法はありますか？

私のやり方が正常に動作しますが、私はまだ満足していない:)これについて

javascript 

$(document).ready(function(){ 
     $("#input").click(function(){ 
      $("#selectives").css('display', 'block'); // displays block "div #selectives" underneath 
      $("input").css('borderRadius', '2px 2px 0px 0px'); // not that important.. just css 
     }); 


     $(".auswahl").click(function(){ // .auswahl (every li element) 
      var thisWord = $(this).html(); // thisWord = the word u want to get the value of 
      $("#input").val(thisWord); // puts the value of "thisWord" into the #input 
      $("#selectives").css('display', 'none'); // immediately if you click an li element, it should disappear 
      $("input").css('borderRadius', '2px'); // not that important.. just css 
     }); 

    }); 

Answer 1

か？

$(document).ready(function(){ 
    var input = $("#input"); 
    var list = $("#selectives"); 
     input.click(function(){ 
      list.toggle(); // displays block "div #selectives" underneath 
      input.toggleClass('open'); // not that important.. just css 
     }); 


     list.on("click", "li",function(){ // .auswahl (every li element) 
      input.val($(this).text()); // puts the value of "thisWord" into the #input 
      list.toggle(); 
      input.toggleClass('open'); 
     }); 

    }); 

CSS：

.open{ 
    border-radius: 2px 2px 0px 0px; 
} 

フォーク：https://jsfiddle.net/q7jg1e0a/2/

私は変数に要素を保存する方が良いと思います。だから毎回それを探す必要はありません。 （スクリプトを遅くする可能性があります。特にDOMが大きい場合は）。

そして、コードでCSSを操作するよりも、クラスを使用する方が良いと思います。それは、CSSの1つの場所でそれを変更し、コードでそれを探す方が簡単です。

また、開閉のみを行う場合は、トグルを使用することができます。これにより、状態を把握する手間が省けます。あなたのコードでメガは必要ありません...

Answer 2

答えに少し遅れましたが、とにかくすぐにそれを投げ捨てる代わりに投稿しました。単に表示/非表示にする別の関数で受け入れ答えとほとんど同じ論法、（コード内のコメント）

$(function(){ 
 
\t var selectives =$("#selectives"), input = $("#input").click(showHide); 
 
    function showHide(){ //single function for the show/hide behaviour 
 
    \t selectives.toggle(); //show/hide the selectives block 
 
    input.toggleClass('droppedDown'); //put the alternate style in a css class and toggle that 
 
    } \t \t \t 
 
    \t selectives.find('li').click(function(){ //every li element inside the selectives div. (Negating the need for the auswahl class) 
 
     showHide(); \t \t \t 
 
     input.val($(this).text()); 
 
\t }); 
 
}); 
 

\t \t body {height: 510px; font-family: Arial} 
 
\t \t #selectives {height: 10px; position: absolute; top: 31px; left: -32px; display: none;} 
 
\t \t #input {position: relative; } 
 
\t \t input:hover {cursor: pointer; } 
 
\t \t input::-moz-selection {background: white; color: #000} 
 
\t \t input {width: 107px; border-radius: 2px; border: 0.1em solid black; background-image:url(https://image.freepik.com/freie-ikonen/doppelpfeil-ios-7-schnittstelle-symbol_318-35368.jpg); -webkit-appearance: none; padding: 5px; font-size: 10px;} 
 
\t \t ul {margin-top: 0px;list-style-type: none; text-align: left;} 
 
\t \t li {width: 107px; border-color: black black orange black; border-style: solid; border-width: 1px; padding: 5px; border-radius: 0px; font-size: 10px; border-top: 0px;} 
 
\t \t li:last-child {border-radius: 0px 0px 2px 2px; border: 1px solid black; border-top: 0px;} 
 
\t \t li:first-child {border-radius: 0px; border-bottom: 1px solid orange; border-top: 0px;} 
 
\t \t li:hover {background-color: ghostwhite; cursor: pointer;} 
 
    
 
.droppedDown{border-radius: 2px 2px 0px 0px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input readonly id="input" type="text" value="Standard"> <!-- readonly = not being able to write --> 
 
\t <div id="selectives"> 
 
\t \t <ul> 
 
\t \t \t <li>1</li> 
 
\t \t \t <li>2</li> 
 
\t \t \t <li>3</li> 
 
\t \t </ul> 
 
\t </div>