スパンタグのテキストをアンカータグのテキストに置き換えます - ドロップダウンメニュー

Question

個々のボタンをクリックするとスパンタグ内のテキストを動的に変更するアンカータグのテキストを取得しようとしているドロップダウンメニューがあります。現時点では私はそれを行うことができますが、下のコードから分かるように、スクリプトは簡単に長すぎるようになります。したがって、私はクラスを使ってそれを行う簡単な方法があると信じていますが、私はそれを成功させるのに苦労しています。

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

とアンカーからテキストを取得します。