第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

帶有單選按鈕和 jQuery 的下拉菜單

帶有單選按鈕和 jQuery 的下拉菜單

胡子哥哥 2022-01-13 15:39:30
我編寫了一個帶有單選按鈕的下拉菜單來更改我網(wǎng)站中的貨幣。我使用 jQuery 打開/關(guān)閉此下拉菜單，但貨幣更改不起作用。該類expanded用于打開/關(guān)閉下拉菜單。我認為錯誤來自這條線$('#' + $(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條經(jīng)驗 獲得超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>


查看完整回答
反對 回復(fù) 2022-01-13
?
嗶嗶one

TA貢獻1854條經(jīng)驗 獲得超8個贊

        嘗試使用以下代碼：-


$(document).ready(function(){

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

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

        if(radioValue){

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

        }

    });

});

您將獲得單選按鈕的值。讓我知道這是否對您有幫助...


查看完整回答
反對 回復(fù) 2022-01-13
  • 2 回答
  • 0 關(guān)注
  • 193 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號