jQuery功能不起作用：選擇同一類中的不同元素

下面的問題是，即使點擊底部按鈕，下拉菜單也會附加到頂部按鈕div。 https://jsfiddle.net/dy0m1frs/jQuery功能不起作用：選擇同一類中的不同元素

$(document).ready(function() { 
 
    function createDropdown() { 
 
    var drop = $('.customDropdown'); 
 
    var i; 
 
    var htmlString = '<div id="dropContainer">'; 
 

 
    for (i = 0; i < 20; i += 1) { 
 
     htmlString += '<div class="dropOption">option ' + i + '</div>'; 
 
    } 
 

 
    htmlString += '</div>'; 
 
    drop.append(htmlString); 
 
    } 
 

 
    createDropdown(); 
 

 

 

 
    $('.customDropdown').on('click', function(event) { 
 
    var container = $('#dropContainer'); 
 
    var target = $(event.target); 
 

 
    if (target.hasClass('valueHolder') || target.hasClass('customDropdown')) { 
 
     container.show(); 
 
    } else if (target.hasClass('dropOption')) { 
 
     drop.find('span.valueHolder').text(target.text()); 
 
     container.hide(); 
 
    } 
 

 

 

 
    }); 
 
});

body { 
 
    background-color: #4E4E4E; 
 
} 
 
.customDropdown { 
 
    position: relative; 
 
    cursor: pointer; 
 
    left: 50%; 
 
    top: 50%; 
 
} 
 
#dropContainer { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: -1px; 
 
    overflow-y: auto; 
 
    max-height: 250px; 
 
    width: 192px; 
 
    background-color: white; 
 
    display: none; 
 
    text-align: left; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 
.btn { 
 
    -moz-box-shadow: inset 0px 0px 0px -1px #ffffff; 
 
    -webkit-box-shadow: inset 0px 0px 0px -1px #ffffff; 
 
    box-shadow: inset 0px 0px 0px -1px #ffffff; 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9)); 
 
    background: -moz-linear-gradient(center top, #f9f9f9 5%, #e9e9e9 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9'); 
 
    background-color: #f9f9f9; 
 
    -webkit-border-top-left-radius: 6px; 
 
    -moz-border-radius-topleft: 6px; 
 
    border-top-left-radius: 6px; 
 
    -webkit-border-top-right-radius: 6px; 
 
    -moz-border-radius-topright: 6px; 
 
    border-top-right-radius: 6px; 
 
    -webkit-border-bottom-right-radius: 0px; 
 
    -moz-border-radius-bottomright: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    -webkit-border-bottom-left-radius: 0px; 
 
    -moz-border-radius-bottomleft: 0px; 
 
    border-bottom-left-radius: 0px; 
 
    text-indent: -4.066px; 
 
    border: 2px solid #dcdcdc; 
 
    display: inline-block; 
 
    color: #666666; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    font-style: normal; 
 
    height: 17px; 
 
    line-height: 17px; 
 
    width: 106px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    text-shadow: 1px 1px 6px #ffffff; 
 
} 
 
.btn:hover { 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9)); 
 
    background: -moz-linear-gradient(center top, #e9e9e9 5%, #f9f9f9 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9'); 
 
    background-color: #e9e9e9; 
 
} 
 
.btn:active { 
 
    position: relative; 
 
    top: 1px;

<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="customDropdown"> 
 
    <span class="valueHolder btn">Select</span> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="customDropdown"> 
 
    <span class="valueHolder btn">Select</span> 
 
    </div> 
 

 
</body>

雖然新來的jQuery，我認爲問題是，createDropdown功能被點擊事件前，在默認情況下被調用的第一個項目中的類=「customDropdown」將總是被使用。所以我嘗試以可變方式重新定義變量drop並在click事件中調用函數，但無濟於事。任何幫助？

比如我想：

$('.customDropdown').on('click', function(event){ 

     var drop = $('.customDropdown').prev(); 
     createDropdown(); 
     var container = $('#dropContainer'); 
     var target = $(event.target);

這僅僅是一個演示，所以我得到它的工作;潛在地，我可以有相同類的無限按鈕，它們需要顯示相同的菜單;銘記這一點，我是否需要真的爲div類添加另一個屬性？

來源

2017-02-09 user1849962

https://jsfiddle.net/cr7g5oxh/ – dfsq

歡呼聲;你做了什麼改變？ – user1849962

哦，我明白了;非常感謝 – user1849962

你有很多問題。首先，您要爲每個按鈕添加一個具有相同ID的div。將其更改爲一類：

var htmlString = '<div class="dropContainer">';

然後，在您單擊處理程序，你需要找到連接到您單擊該按鈕的具體DIV：

var container = $(this).find('.dropContainer');

然後，在else if條件， drop變量不可用，因爲它是在另一個函數中定義的。你需要找到正確的跨度，而不是：

$(this).find('span.valueHolder').text(target.text());

最後，在你的CSS，改變#dropContainer聲明.dropContainer。

您仍然有一些css工作要做，因爲第二個按鈕總是顯示第一個按鈕的選項。

https://jsfiddle.net/dy0m1frs/5/

來源

2017-02-09 19:28:44 earachefl

非常感謝;是的，我知道按鈕正在阻礙列表atm – user1849962

jQuery功能不起作用：選擇同一類中的不同元素

回答

相關問題