javascript - 如何处理 ul 和 li 制作的同一类下拉菜单

Question

我这里有两个具有相同类名的下拉菜单，它们由列表组成，每个都包含一个输入字段，当您单击输入时，下拉菜单会像正常选择下拉菜单一样打开，但是当我选择该下拉菜单的任何选项时，其他下拉列表的值也发生变化。如何阻止它？请帮助我....

function DropDown(el) {
  this.dd = el;
  this.initEvents();
}
DropDown.prototype = {
  initEvents: function() {
    var obj = this;
    obj.dd.on('click', function(event) {
      $(this).toggleClass('active');
      event.stopPropagation();
    });
  }
}

$(function() {
  var dd = new DropDown($('.dd'));
  $(document).click(function() {
    // all dropdowns
    $('.wrapper-dropdown-5').removeClass('active');
  });
});

$("li.item").click(function() {
  var li_val = $(this).text();
  console.log(li_val);

  //console.log($($($(this).parent()).parent()).children());
  //$($($($(this).parent()).parent()).children()[0]).val(li_val);
  //$(".inP").val(li_val);
});

$(".add").click(function() {
  var inPPuT = $(".inP").val();
  $(".live-search-list").prepend("<li class='item'><a href='#'><i class='icon-user'></i>" + inPPuT + "</a></li>");
  $('.wrapper-dropdown-5').removeClass('active');
});

$(document).ready(function() {
  var wrapper = $('.live-search-list');
  $(wrapper).on('click', '.item', function(e) { //Once remove button is clicked
    e.preventDefault();
    var li_vl = $(this).text();
    $(".inP ").val(li_vl);
  });
});

$('.live-search-list li.item').each(function() {
  $(this).attr('data-search-term', $(this).text().toLowerCase());
});

$('.live-search-box').on('keyup', function() {
  var searchTerm = $(this).val().toLowerCase();

  $('.live-search-list li.item').each(function() {
    if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
::selection {
  background: transparent;
}
::-moz-selection {
  background: transparent;
}
.wrapper-demo {
  margin: 60px 0 0 0;
  *zoom: 1;
  font-weight: 400;
}
.wrapper-demo:after {
  clear: both;
  content: "";
  display: table;
}
.wrapper-dropdown-5 {
  /* Size & position */
  position: relative;
  width: 200px;
  margin: 0 auto;
  padding: 12px 15px;
  /* Styles */
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  outline: none;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.wrapper-dropdown-5:after {
  /* Little arrow */
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #4cbeff transparent;
}
.wrapper-dropdown-5 .dropdown {
  /* Size & position */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Styles */
  background: #fff;
  border-radius: 0 0 5px 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: none;
  border-bottom: none;
  list-style: none;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  /* Hiding */
  max-height: 0;
  overflow: hidden;
}
.wrapper-dropdown-5 .dropdown li {
  padding: 0 10px;
}
.wrapper-dropdown-5 .dropdown li a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px 0;
  transition: all 0.3s ease-out;
  border-bottom: 1px solid #e6e8ea;
}
.wrapper-dropdown-5 .dropdown li:last-of-type a {
  border: none;
}
.wrapper-dropdown-5 .dropdown li i {
  margin-right: 5px;
  color: inherit;
  vertical-align: middle;
}
/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
  color: #57a9d9;
}
/* Active state */

.wrapper-dropdown-5.active {
  border-radius: 5px 5px 0 0;
  background: #4cbeff;
  box-shadow: none;
  border-bottom: none;
  color: white;
}
.wrapper-dropdown-5.active:after {
  border-color: #82d1ff transparent;
}
.wrapper-dropdown-5.active .dropdown {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  max-height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-dropdown-5 dd" tabindex="1">
  <input class="inP live-search-box" type="text" name="items[]">
  <ul class="dropdown live-search-list">
    <li class="item"><a href="#"><i class="icon-user"></i>Profile</a></li>
    <li class="item"><a href="#"><i class="icon-cog"></i>Settings</a></li>
    <li class="item"><a href="#"><i class="icon-remove"></i>Log out</a></li>
    <li>
      <a href="#">
        <button class="add_item" type="button">Add Item</button>
      </a>
    </li>
  </ul>
</div>
<div style="margin-top: 100px;" class="wrapper-dropdown-5 dd" tabindex="1">
  <input class="inP live-search-box" type="text" name="items[]">
  <ul class="dropdown live-search-list">
    <li class="item"><a href="#"><i class="icon-user"></i>Profile</a></li>
    <li class="item"><a href="#"><i class="icon-cog"></i>Settings</a></li>
    <li class="item"><a href="#"><i class="icon-remove"></i>Log out</a></li>
    <li>
      <a href="#">
        <button class="add_item" type="button">Add Item</button>
        </li>
  </ul>
</div>

Answer 1

您必须在您的父div 中找到.inp。
使用 closest 定位你的 div parent 并在其中找到类名 .inp

更改代码

$(document).ready(function() {
  var wrapper = $('.live-search-list');
  $(wrapper).on('click', '.item', function(e) { //Once remove button is clicked
    e.preventDefault();
    var li_vl = $(this).text();
    $(".inP ").val(li_vl);
  });
});

到

 $(document).ready(function() {
  var wrapper = $('.live-search-list');
  $(wrapper).on('click', '.item', function(e) { //Once remove button is clicked
    e.preventDefault();
    var li_vl = $(this).text();
    $(this).closest("div").find(".inP ").val(li_vl); // find parent 1st
  });
});

Jsfiddle:https://jsfiddle.net/synz/13tLhfhv/