javascript - 未使用 jquery 中的单击功能设置属性引用

Question

在我的codepen我有两个下拉菜单，每个下拉菜单都有自己的链接，目前有一个相对网址。

列表项的基本结构如下所示:

<ul class="which-way">
    <li class="which-init">Unguided I-Day Return Trips</li>
    <li data-value="value 2" class="cadja"><span class="value">beginners</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>

使用 jquery，我设法获取带有类值的跨度内的文本。

现在我想在单击时将该值添加到 url，并且该 url 应如下所示:

例如:http://www.google.com/beginners

当我点击li后点击链接时，href不会改变。

如何将 href 更改为我想要的链接？

我的 JS 目前看起来像这样:

$(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')[0]).html($(this).html());
    handleDropdownOne();
  });  
});
window.handleDropdownOne = function() {
  var 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);
});

请帮忙

Answer 1

在函数外部声明变量“dropOneValue”

$(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')[0]).html($(this).html());
    handleDropdownOne();
});
});
var dropOneValue = '';
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);
});