クラスが追加された後の要素テキスト値の取得

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

私は想像することができる最も簡単な方法は、リストの要素をクリックすると、あなたの変数を更新するには、このイベントに関数を結合し、その後、カスタムイベントをトリガすることです。

例以下：

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>