ul＆liによって同じクラスのドロップダウンを処理する方法

Question

私は同じクラス名を持つ2つのドロップダウンがあります。これらはリストで作成され、入力フィールドをそれぞれ含みます。入力をクリックすると、ドロップダウンが通常の選択ドロップダウンとして開きますドロップダウンのオプションを選択すると、他のドロップダウンの値も変化します。どのようにそれを停止するには？あなたはとてもあなたが書いているjavascriptの何がdropdown.Pleaseがあなたのクラス名を変更する両方のために働いているドロップダウンのために同じクラスを使用している

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

.inpを親のdivで見つける必要があります。選ぶことhttps://jsfiddle.net/synz/13tLhfhv/

Answer 2

....私を助けてください。