将类从被单击的元素转移到另一个元素

Question

我正在制作一个语言选择器—想象一个select标记，其中有选项。每个选项标签都有一个具有唯一类的span。

我要做的是，在点击时将这个类转移到select标签。

我没有任何代码，那么如何用jQuery完成这个?

Answer 1

能否提供该部分的HTML代码?你是说在<option>里面有<span> ?

这不是很好，看到了吗? <选项 />标签，仅用于字符串操作而不是样式?

但现在我只是假设你想把<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的span标签将消失。话虽如此，我已经为你们做了一个简短的分解示例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>