jQueryを使用してulリストの値を変更するにはどうすればよいですか？

Question

私はこのリストを持っている：

<ul class="country-list hide"> 
    <li class="country" data-dial-code="213" data-country-code="dz"><div class="flag-box"><div class="iti-flag dz"></div></div><span class="country-name">Algeria (‫الجزائر‬‎)</span><span class="dial-code">+213</span></li> 
    <li class="country" data-dial-code="376" data-country-code="ad"><div class="flag-box"><div class="iti-flag ad"></div></div><span class="country-name">Andorra</span><span class="dial-code">+376</span></li> 
    <li class="country" data-dial-code="244" data-country-code="ao"><div class="flag-box"><div class="iti-flag ao"></div></div><span class="country-name">Angola</span><span class="dial-code">+244</span></li> 
</ul> 

そして、私が選択された1つのチェックと、そこからデータ国コードを取得したい、 どれ体はjQueryを使ってそれを行う方法上の任意のアイデアを持っていますか？

Answer 1

あなたがその時に「アクティブ」のようなクラスを追加し、アクティブなクラスを他のliから削除する必要があるときは、それをクリックします。これにより、選択されたliの値を得ることができます。

$('.active .country-name').html(); 

と

$('.active .dial-code').html(); 

Answer 2

選択された要素にアクセスするには、2つの値を持っています。

一つは "ヴァル" であり、1は「値を取得するには、「

テキストです：あなたは、私がこの

$("ul.country-list option:selected").attr("data-country-code").val(); 

Answer 3

で試すことができます$('ul.country-list').text();

：テキストを取得するために$('ul.country-list').val();

を"変更"と "：選択された"単語に関連する混乱があると思っているこれらは選択タグで動作する しかし、これはjQueryでこれです：

<script> 
$(document).ready(function(){ 
    $('.country-list li').click(function(){ 
    var dataVal = $(this).data('dial-code'); 
    alert(dataVal); 
    }); 
}); 
</script> 

希望があります。

Answer 4

他の人は、選択するオプションがないので、現在のクリックリスト要素にクラスを追加することでこれを行う必要があるとコメントし、私はあなたの仕事でいくつかのHTMLコードを更新しました。

HTML：

<ul class="country-list hide"> 
<li class="country"> 
    <div class="flag-box"> 
     <div class="iti-flag dz"></div> 
    </div> 
    <span class="country-name" data-country-code="dz">Algeria (‫الجزائر‬‎)</span> 
    <span class="dial-code" data-dial-code="213" >+213</span> 
</li> 
<li class="country"> 
    <div class="flag-box"> 
     <div class="iti-flag ad"></div> 
    </div> 
    <span class="country-name" data-country-code="ad" >Andorra</span> 
    <span class="dial-code" data-dial-code="376" >+376</span> 
</li> 
<li class="country"> 
    <div class="flag-box"> 
     <div class="iti-flag ao"></div> 
    </div> 
    <span class="country-name" data-country-code="ao">Angola</span> 
    <span class="dial-code" data-dial-code="244" >+244</span> 
</li> 
</ul> 

why i change data-attr position to span

のjQuery：

$('ul.country-list li').on('click',function(){ 

$('ul.country-list>li').removeClass('active'); 

var dailCode = $(this).addClass('active').find('[data-dial-code]').attr('data-dial-code'); 

var dataCountryCode = $(this).find('[data-country-code]').attr('data-country-code'); 

alert(dailCode+' Country Code '+dataCountryCode); 
}); 

いくつかのCss：

ul.country-list>li { 
    cursor:pointer; 
} 

ul.country-list li.active span { 
color: red; 
} 

そしてここにあるJS Fiddle