带有单选按钮和 jQuery 的下拉菜单

Question

我编写了一个带有单选按钮的下拉菜单来更改我网站中的货币。我使用 jQuery 打开/关闭此下拉菜单，但货币更改不起作用。

该类expanded用于打开/关闭下拉菜单。

我认为错误来自这条线$('#' + $(e.target).attr('for')).prop('checked', true);，但我不知道如何修改它。我希望它检查正确的输入。

$('.maincar__currency').click(function(e) {

  e.preventDefault();

  e.stopPropagation();

  $(this).toggleClass('expanded');

  $('#' + $(e.target).attr('for')).prop('checked', true);

});

$(document).click(function() {

  $('.maincar__currency').removeClass('expanded');

});

.maincar__currency {

  display: flex;

  flex-direction: column;

  min-height: 32px;

  max-height: 32px;

  margin-left: auto;

  margin-bottom: 10px;

  overflow: hidden;

  border-radius: 6px;

  box-sizing: border-box;

  box-shadow: $shadowBox;

  font-size: 14px;

  font-weight: 500;

}

.maincar__currency label {

  display: flex;

  width: 80px;

  height: 32px;

  padding-top: 6px;

  padding-bottom: 6px;

  padding-left: 8px;

  margin-right: 0 auto;

  background-color: #fff;

  text-align: center;

  color: $mediumMainGrey;

  cursor: pointer;

  //box-sizing: border-box;

}

.maincar__currency label:hover {

  background-color: $extraLightGrey;

}

.currency {

  display: flex;

  width: 100%;

}

.currency input {

  display: none;

}

.currency img {

  //object-fit: contain;

  height: 20px;

  width: auto;

  margin-right: 6px;

}

.currency span {

  display: flex;

  //align-items: center;

  color: $mediumMainGrey;

  text-decoration: none;

}

Answer 1

CSS（添加这些额外的类）：.maincar__currency label{&nbsp; &nbsp; display: none;}.expanded label{&nbsp; &nbsp; display: block;}JS和HTML：$('.maincar__currency').click(function(e) {&nbsp; e.preventDefault();&nbsp; e.stopPropagation();&nbsp; $(this).toggleClass('expanded');});$(".maincar__currency label").click(function(){&nbsp; &nbsp; $('#' + $(this).attr('for')).prop('checked', true);&nbsp; &nbsp; var selected = $('input[name=currency-is]:checked').val(); // <-- add this line&nbsp; &nbsp; $('.active_currency').text(selected.toUpperCase());&nbsp; // <-- and this line&nbsp; &nbsp; alert(selected);});$(document).click(function() {&nbsp; $('.maincar__currency').removeClass('expanded');});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="maincar__currency"><div class="active_currency">EUR</div>&nbsp; <label for="euro-radio-is">&nbsp; &nbsp; &nbsp; &nbsp; <div class="currency currency__euro">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="/assets/images/icons/euro.png" alt="Euro sign">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="default">EUR</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </label>&nbsp; <label for="dollar-radio-is">&nbsp; &nbsp; &nbsp; &nbsp; <div class="currency currency__dollar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="/assets/images/icons/dollar.png" alt="Dollar sign">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>USD</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </label>&nbsp; <label for="gbp-radio-is">&nbsp; &nbsp; &nbsp; &nbsp; <div class="currency currency__pound">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>GBP</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </label>&nbsp; <label for="chf-radio-is">&nbsp; &nbsp; &nbsp; &nbsp; <div class="currency currency__chf">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>CHF</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </label></div>

Answer 2

&nbsp; &nbsp; &nbsp; &nbsp; 尝试使用以下代码：-$(document).ready(function(){&nbsp; &nbsp; $("input[type='radio']").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; var radioValue = $("input[name='currency-is']:checked").val();&nbsp; &nbsp; &nbsp; &nbsp; if(radioValue){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Your are a - " + radioValue);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});您将获得单选按钮的值。让我知道这是否对您有帮助...