如何獲得DIV ID，並將其設置爲anoher FUNC

Question

有獲得點擊DIV ID 一個FUNC需要給下一個FUNC這個ID代替 「＃dropdown1」

$(function() { 



    $('.drop-down-input').click(function() { 

     $elementid = this.id; 
     $elementid= "#" + elementid; 
    }); 
     console.log($elementid); 
    $("#dropdown1").click(function() { 

     $("#dropdown1 .dropdown-list").show(); 

    }); 

    $("#dropdown1 .dropdown-list li").on('click', function(e) { 
    e.stopPropagation(); 
    $("#dropdown1 .dropdown-list").hide().siblings().val($(this).html()); 
    }); 
}); 

HTML：

<div id="dropdown1" class="styled-input-container drop-down-input"> 
        <input id="simple_2" class="drop-down-select" placeholder="input text" type="text"> 
        <ul class="dropdown-list"> 
         <li>eeee</li> 
         <li>xxxx</li> 
         <li>xxxx</li> 
         <li>xsssxxx</li> 
        </ul> 
       </div> 

想法是我可以在另一個地方再次使用此代碼。 for examle use 2 dropdowns with different ID

Answer 1

不要發送ID，請向該元素添加一個類。

$('.drop-down-input').click(function() { 
    $('.drop-down-input.selected').removeClass('selected'); // Forget the previous selection 
    $(this).addClass('selected'); 
    $(this).find(".dropdown-list").show(); 
}); 

然後在接下來的功能，你可以使用一個選擇，找到點擊的元素：

$(document).on("click", ".drop-down-input.selected li"), function(e) { 
    e.stopPropagation(); 
    $('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html()); 
}); 

這種方法比保存ID在一個變量的一個好處是，你可以使用CSS來添加所選元素的樣式。

全碼：

$('.drop-down-input').click(function() { 
 
    $('.drop-down-input.selected').removeClass('selected'); // Forget the previous selection 
 
    $(this).addClass('selected'); 
 
    $(this).find(".dropdown-list").show(); 
 
}); 
 

 
$(document).on("click", ".drop-down-input.selected li", 
 
    function(e) { 
 
    e.stopPropagation(); 
 
    $('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html()); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dropdown1" class="styled-input-container drop-down-input"> 
 
    <input id="simple_2" class="drop-down-select" placeholder="input text" type="text"> 
 
    <ul class="dropdown-list"> 
 
    <li>eeee</li> 
 
    <li>xxxx</li> 
 
    <li>xxxx</li> 
 
    <li>xsssxxx</li> 
 
    </ul> 
 
</div>