javascript - 添加类后获取元素文本值

Question

我正在尝试获取在单击后添加类的元素的文本值。但我无法得到它。我也试过使用 html()。

 let selectLevel;

function selectOption(menu) {

  $(menu).on('click', "li", function() {

    $(menu).find('.activeSelection').removeClass();
    $(this).addClass('activeSelection');

  });
}

$(document).ready(function() {

  selectOption('.levelList');

  selectLevel = $('.levelList').find('.activeSelection').text();

});

Answer 1

我能想到的最简单的方法是在您单击列表元素时触发一个自定义事件，然后将一个函数绑定(bind)到该事件以更新您的变量。

示例如下:

let selectLevel;

function selectOption(menu) {

  $(menu).on('click', "li", function() {

    $(menu).find('.activeSelection').removeClass();
    $(this).addClass('activeSelection');
    $(menu).trigger('itemChanged'); //trigger custom event
  });
}

$(document).ready(function() {

  selectOption('.levelList');

  $('.levelList').on('itemChanged', function() { // wait for event on your menu
    selectLevel = $(this).find('.activeSelection').text();
    console.log(selectLevel); // just logging the current value
  });
  
});

.activeSelection {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="levelList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>