將單擊元素轉移到另一個類

Question

我正在編寫一個語言選擇器—想象一個帶有選項的選擇標記。 每個選項標籤都有一個獨特類的跨度。

我想做的事情是，點擊時將該類轉移到選擇標記。

我沒有任何代碼，那麼jQuery怎麼做？

Answer 1

你可以提供部分的HTML代碼？ 您的意思是說裏面有<span>？

這不是很好，看到It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

但現在我只是想你想的類<option>的複製到<select>

$('#selectid').change(function() { 
    var target_class = $(this).find(':selected').attr('class'); 
    $(this).removeClass().addClass(target_class); 
    # removeClass to clear previous classes added 
    # You could add back some default classes if you want 
}); 

Answer 2

像這樣的事情

$('select').change(function(){ 
    var t = $(this), o = t.find('option:selected span'); 
    t.addClass(o.attr('class')); 
    o.removeClass(); 
}); 

Answer 3

默認情況下的onload您的跨度標籤將會消失。有人說，我已經爲你做了一個簡短的細分例子JsFiddle

。我建議你通過一些CSS魔法來工作並繼續這個項目。這裏有一些快速的細節。

<select> 
    <option selected>select</option> 
    <option class="a">1</option> 
    <option class="b">2</option> 
    <option class="c">3</option> 
    <option class="d">4</option> 
    <option class="e">5</option> 
</select> 

<script> 
$(function(){ 
    $('select').change(function(){ 
     if($(this).val() == 'select'){ 
      $(this).removeAttr('class') 
     }else{ 
      $(this).find('option').each(function(){ 
       if($(this).text() == $(this).parent().val()){ 
        $(this).parent().attr('class',$(this).attr('class')); 
       } 
      }) 
      alert($(this).attr('class')); // Select new class Value 
     } 
    }) 
}) 
</script>