JavaScript Dropdown Function Refactor

Question

嗨，我有3個下拉菜單，每個都有自己的id，我這樣做是因爲我將下拉列表的值設置爲我選擇的任何一個，並且我想區分它們。

的HTML我的下拉菜單是：

<div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject 
        <span class="caret"></span> 
       </button> 

       <ul class="dropdown-menu" id="makein"> 
        <li>bmw</li> 
        <li>mercedes</li> 
        <li>mazda</li> 
        <li>ford</li> 
        <li>lada</li> 
        <li>audi</li> 
        <li>skoda</li> 
        <li>fiat</li> 
       </ul> 

      </div> 

      <div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year 
        <span class="caret"></span> 
       </button> 

       <ul class="dropdown-menu" id="yearin"> 
        <li>2016</li> 
        <li>2015</li> 
        <li>2014</li> 
        <li>2013</li> 
        <li>2012</li> 
        <li>2011</li> 
        <li>2010</li> 
        <li>2009</li> 
       </ul> 

      </div> 

      <div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level 
        <span class="caret"></span> 
       </button> 

       <ul class="dropdown-menu" id="levelin"> 
        <li>luxury</li> 
        <li>ordinary</li> 
       </ul> 

      </div> 

我有3個JavaScript函數來設置下拉的價值基於其ID每個部分如下：

$(function() { 
     $("#makein li").click(function(){ 

      $("#make").html($(this).text()+' <span class="caret"></span>'); 

     }); 
    }); 

$(function() { 
     $("#yearin li").click(function(){ 

      $("#year").html($(this).text()+' <span class="caret"></span>'); 

     }); 
    }); 

$(function() { 
     $("#levelin li").click(function(){ 

      $("#level").html($(this).text()+' <span class="caret"></span>'); 

     }); 
    }); 

我真不不喜歡具有3種不同JavaScript功能的方法。我想知道你們是否知道做出這3個功能的方法。

Answer 1

你可以這樣做：

$(function() { 
 
    $("li").click(function() { 
 
     $(this).parent().siblings('button').first().html($(this).text() + ' <span class="caret"></span>'); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" id="makein"> 
 
    <li>bmw</li> 
 
    <li>mercedes</li> 
 
    <li>mazda</li> 
 
    <li>ford</li> 
 
    <li>lada</li> 
 
    <li>audi</li> 
 
    <li>skoda</li> 
 
    <li>fiat</li> 
 
    </ul> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" id="yearin"> 
 
    <li>2016</li> 
 
    <li>2015</li> 
 
    <li>2014</li> 
 
    <li>2013</li> 
 
    <li>2012</li> 
 
    <li>2011</li> 
 
    <li>2010</li> 
 
    <li>2009</li> 
 
    </ul> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" id="levelin"> 
 
    <li>luxury</li> 
 
    <li>ordinary</li> 
 
    </ul> 
 
</div>

Answer 2

此代碼應工作：

$(function() { 
    $('.dropdown-menu li').click(function() { 
    $(this).closest('dropdown').find('button').html($(this).text()+' <span class="caret"></span>') 
    }) 
})