点击保存按钮将.comp-abbr文本存localStorage并在.iresult显示，代码错误如何解决

现有代码存在的问题 #

• 活跃元素选择逻辑错误：active类是直接添加在.comp-abbr元素自身上的，原代码$('.active').find('.comp-abbr')是在带active类的元素的子节点中查找.comp-abbr，永远获取不到目标值，正确写法应为选中同时满足两个类条件的元素$('.comp-abbr.active')
• 变量引用错误：你将选中的文本赋值给了abbr变量，也将值存入了localStorage的test键中，但后续给.iresult赋值时直接引用了未定义的test变量，要么直接使用已定义的abbr变量，要么主动从localStorage读取localStorage.getItem('test')

修复后代码 #

JS代码 #

$(".comp-abbr").on("click", function() {
    $(".comp-abbr").removeClass("active");
    $(this).addClass("active"); 
});

$(".saveBtn").on("click", function(){
    // 直接获取带active类的.comp-abbr的文本
    var abbr = $('.comp-abbr.active').text();
    localStorage.setItem('test', abbr);
    // 直接用已拿到的abbr变量赋值，也可以写成 localStorage.getItem('test')
    $(".iresult").html(abbr);
});

HTML代码（无改动） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comp-abbr active">Value One</div>
<div class="comp-abbr">Value Two</div>
<div class="comp-abbr">Value Three</div>

<div class="saveBtn">Click me</div>

<div class="iresult"></div>

修复后点击不同的.comp-abbr元素选中，再点击保存按钮，即可将选中的文本存入localStorage，同时渲染到.iresult区域展示。

内容的提问来源于stack exchange，提问作者CoreTM