为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

胡子哥哥 2022-01-13 15:39:30
我编写了一个带有单选按钮的下拉菜单来更改我网站中的货币。我使用 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;}
查看完整描述

2 回答

?
慕妹3146593

TA贡献1820条经验 获得超9个赞

CSS(添加这些额外的类):


.maincar__currency label{

    display: none;

}

.expanded label{

    display: block;

}

JS和HTML:


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

  e.preventDefault();

  e.stopPropagation();

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

});


$(".maincar__currency label").click(function(){

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

    var selected = $('input[name=currency-is]:checked').val(); // <-- add this line

    $('.active_currency').text(selected.toUpperCase());  // <-- and this line

    alert(selected);

});


$(document).click(function() {

  $('.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>

  <label for="euro-radio-is">

        <div class="currency currency__euro">

            <img src="/assets/images/icons/euro.png" alt="Euro sign">

            <input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true" />

            <span class="default">EUR</span>

        </div>

    </label>

  <label for="dollar-radio-is">

        <div class="currency currency__dollar">

            <img src="/assets/images/icons/dollar.png" alt="Dollar sign">

            <input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar" />

            <span>USD</span>

        </div>

    </label>

  <label for="gbp-radio-is">

        <div class="currency currency__pound">

            <img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">

            <input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp" />

            <span>GBP</span>

        </div>

    </label>

  <label for="chf-radio-is">

        <div class="currency currency__chf">

            <img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">

            <input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf" />

            <span>CHF</span>

        </div>

    </label>

</div>


查看完整回答
反对 回复 2022-01-13
?
哔哔one

TA贡献1854条经验 获得超8个赞

        尝试使用以下代码:-


$(document).ready(function(){

    $("input[type='radio']").click(function(){

        var radioValue = $("input[name='currency-is']:checked").val();

        if(radioValue){

            alert("Your are a - " + radioValue);

        }

    });

});

您将获得单选按钮的值。让我知道这是否对您有帮助...


查看完整回答
反对 回复 2022-01-13
  • 2 回答
  • 0 关注
  • 167 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信