我想在我的网站上执行以下操作-
当我单击一个列表项时，它必须从具有 class 值的 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>根据@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());`
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句