如何获取 div id 并将其设置为另一个 func

Question

有一个被点击的函数 div id 需要给下一个 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>

想法是我可以在另一个地方再次使用这段代码。例如，使用 2 个具有不同 ID

的下拉菜单

Answer 1

不发送 ID，在元素中添加一个 class。

$('.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>

如何获取 div id 并将其设置为另一个 func

How to get div id and set it to anoher func

javascript

oop

jquery

func