使用锚标记中的文本替换跨度标记中的文本 - 下拉菜单

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>

文本