如何在jQuery中使用多個下拉菜單

Question

我想在我的網站上進行以下操作-

當我單擊列表項時，它必須從span標記中獲取帶有類值的文本。 這樣，當我單擊與該列表相關的按鈕時，它應該將收集的文本附加到鏈接引用中。

目前，我的代碼僅適用於第一個列表項。 當我想對下一個項目執行相同操作時，它會為我提供第一個列表項目中的數據。

這是我的代碼

 $(document).ready(function() { var dropOneValue = ""; $("ul.which-way").on("click", function() { $(this).find('li').toggleClass("open-list"); $(this).find('open-list').css("display", "block"); }); $("li.cadja").on("click", function() { dropOneValue = "" $($(this).parent().find('.which-init')[0]).html($(this).html()); handleDropdownOne(); }); }); window.handleDropdownOne = function() { dropOneValue = $($($('.drowpdown-one').find('.which-init')[0]).find('span.value')[0]).text(); console.log(dropOneValue); }; handleDropdownOne(); $('a#trip').on("click", function() { $(this).attr("href", "https://www.westcoastway.co.za/" + dropOneValue); }); 

 .which-wrapper { width: 100%; max-width: 300px; } ul.which-way { margin: 0; list-style: none; background-color: grey; margin-bottom: 5px; } ul.which-way li:not(:first-child) { display: none; } .value { display: none !important; } ul.which-way { cursor: pointer; padding: 0; } .value { display: none; } li.open-list { display: block !important; } .find { margin-bottom: 10px; display: inline-block; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> HTML: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="which-wrapper"> <div class="drowpdown-one dropdown"> <ul class="which-way"> <li class="which-init">Unguided I-Day Return Trips</li> <li data-value="value 2" class="cadja"><span class="value">darling-wine-hops-day-by-which-way</span><span class="real">Darling Wine & Beer Trip</span></li> <li data-value="value 3" class="cadja"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span><span class="real">Culture & Adventure Trip</span></li> <li data-value="value 4" class="cadja"><span class="value">cape-west-coast-wildlife-fossil-trip</span><span class="real">Wildlife & Fossils Trip</span></li> </ul> <a href="#" target="__blank" id="trip" class="find">FIND YOUR TRIP</a> </div> <div class="drowpdown-one dropdown"> <ul class="which-way"> <li class="which-init">Guided I-Day Return Trips</li> <li data-value="value 2" class="cadja"><span class="value">5-day-west-coast</span><span class="real">5 Day West Coast Explorer</span></li> <li data-value="value 3" class="cadja"><span class="value">5-day-namaqua-spring-flower-tour</span><span class="real">5 Day Namaqualand Spring Flower</span></li> </ul> <a href="#" target="__blank" id="tour" class="find">FIND YOUR TRIP</a> </div> </div> 

Answer 1

您需要獲取相對於所單擊元素的span.value，然后使用新值更改鏈接的url：

 $(document).ready(function() { $("ul.which-way").on("click", function() { $(this).find('li').toggleClass("open-list"); $(this).find('open-list').css("display", "block"); }); $("li.cadja").on("click", function() { $(this).parent().find('.which-init').html($(this).html()); var dropOneValue = $(this).find('span.value').text(); $(this).closest('.dropdown').find('.find').attr("href", "https://www.westcoastway.co.za/" + dropOneValue); console.log(dropOneValue); }); }); 

 .which-wrapper { width: 100%; max-width: 300px; } ul.which-way { margin: 0; list-style: none; background-color: grey; margin-bottom: 5px; } ul.which-way li:not(:first-child) { display: none; } .value { display: none !important; } ul.which-way { cursor: pointer; padding: 0; } .value { display: none; } li.open-list { display: block !important; } .find { margin-bottom: 10px; display: inline-block; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> HTML: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="which-wrapper"> <div class="drowpdown-one dropdown"> <ul class="which-way"> <li class="which-init">Unguided I-Day Return Trips</li> <li data-value="value 2" class="cadja"><span class="value">darling-wine-hops-day-by-which-way</span><span class="real">Darling Wine & Beer Trip</span></li> <li data-value="value 3" class="cadja"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span><span class="real">Culture & Adventure Trip</span></li> <li data-value="value 4" class="cadja"><span class="value">cape-west-coast-wildlife-fossil-trip</span><span class="real">Wildlife & Fossils Trip</span></li> </ul> <a href="#" target="__blank" id="trip" class="find">FIND YOUR TRIP</a> </div> <div class="drowpdown-one dropdown"> <ul class="which-way"> <li class="which-init">Guided I-Day Return Trips</li> <li data-value="value 2" class="cadja"><span class="value">5-day-west-coast</span><span class="real">5 Day West Coast Explorer</span></li> <li data-value="value 3" class="cadja"><span class="value">5-day-namaqua-spring-flower-tour</span><span class="real">5 Day Namaqualand Spring Flower</span></li> </ul> <a href="#" target="__blank" id="tour" class="find">FIND YOUR TRIP</a> </div> </div> 

Answer 2

基於@madalin的答案，只是使您的jquery像這樣：

$(document).ready(function(){
    var dropOneValue = "";
            $("ul.which-way").on("click", function() {
            $(this).find('li').toggleClass("open-list");
            $(this).find('open-list').css("display", "block");
            });
            $("li.cadja").on("click", function(){
                console.log($(this).find('.value').html());
          dropOneValue = $(this).find('.value').html();
           $($(this).parent().find('.which-init')[0]).html($(this).html());
            });  

            $('a#trip').on("click", function(){
                $(this).attr("href", "https://www.westcoastway.co.za/"+dropOneValue);
            });

            $('a#tour').on("click", function(){
                $(this).attr("href", "http://capeytours.co.za/west-coast-tours/"+dropOneValue);
            });
    });

我只是簡單地添加了您先前代碼中的代碼：

$($(this).parent().find('.which-init')[0]).html($(this).html());`