使用錨標記中的文本替換跨度標記中的文本 - 下拉菜單

Question

我有一個下拉菜單，其中我試圖讓錨標記中的文本在單擊各個按鈕時動態更改span標記內的文本。目前我能夠做到這一點，但正如您從下面的代碼中看到的那樣，腳本很容易變得太長。因此，我相信有一種更簡單的方式來使用類，儘管我正在努力成功地做到這一點。

$(".menu__item").click(function() { 
 
    var btnId = $(this).attr('data-btnId'); 
 
    $(".selecBox").text('Example'); 
 
    $('.menu').removeClass('-is--open'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position: relative;"> 
 
    <a class="dropdown -spacing--dense" role="button" style="text-decoration: none;"> 
 
    <span class="selecBox">Arizona</span><i class="fa fa-chevron-down"></i></a> 
 
    <div class="menu -theme--light -position--below -align--left"> 
 
    <a class="menu__item" role="button" aria-pressed="true" data-btnId="btn1">Arizona</a> 
 
    <a class="menu__item" role="button" aria-pressed="true" data-btnId="btn2">California</a> 
 
    <a class="menu__item" role="button" aria-pressed="true" data-btnId="btn3">Colorado</a> 
 
    <a class="menu__item" role="button" aria-pressed="true" data-btnId="btn4">Delaware</a> 
 
    </div> 
 
</div>

Answer 1

獲得從錨與$(this).text()

$(".menu__item").click(function() { 
 
    var btnId = $(this).attr('data-btnId'); 
 
    $(".selecBox").text($(this).text()); 
 
    $('.menu').removeClass('-is--open'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position: relative;"> 
 
    <a class="dropdown -spacing--dense" role="button" style="text-decoration: none;"> 
 
    <span class="selecBox">Arizona</span><i class="fa fa-chevron-down"></i></a> 
 
    <div class="menu -theme--light -position--below -align--left"> 
 
    <a class="menu__item" role="button" aria-pressed="true" data-btnId="btn1">Arizona</a> 
 
    <a class="menu__item" role="button" aria-pressed="true" data-btnId="btn2">California</a> 
 
    <a class="menu__item" role="button" aria-pressed="true" data-btnId="btn3">Colorado</a> 
 
    <a class="menu__item" role="button" aria-pressed="true" data-btnId="btn4">Delaware</a> 
 
    </div> 
 
</div>

文本