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

Question

我正在制作一个语言选择器——想象一个带有选项的选择标签。每个选项标签都有一个具有唯一类的跨度。

我想做的是，在单击时将该类转移到选择标签。

我没有任何代码，那么这是如何使用 jQuery 完成的呢？

Answer 1

像这样的东西

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

Answer 2

你能提供那个部分的HTML代码吗？你的意思是<span>里面有<option>？

这不是很好，请参阅将 <span /> 标签放在 <option /> 标签内是不好的，仅用于字符串操作而不是样式？

但现在我只是假设你想将类复制<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 3

默认情况下，您的跨度标签将消失。话虽如此，我已经为你做了一个简短的分解示例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>