如何将列表/菜单值作为类传递给元素？答案

【问题标题】：How to pass a list/menu value as a class to an element?如何将列表/菜单值作为类传递给元素？
【发布时间】：2012-05-25 02:59:35
【问题描述】：

我有一个下拉列表/菜单，每个选项都有一个值。我希望将该值传递给元素以确定所需的样式。这是我的原始 html，希望 jquery 能够做到这一点。它也需要传递的元素称为

 <div class="user-text">

所以我希望它可以根据值添加这样的类。

 <div class="user-text curveMeTop">

这是我的值列表

 <div class="top15">
  <div class="label">Text Warp</div>
  <select name="warp-list">
    <option value="curveMeTop">Curve Top</option>
    <option value="curveMeBottom">Curve Bottom</option>
    <option value="wave">Wave</option>
    <option value="buldge">Buldge</option>
    <option value="skew">Skew</option>
  </select>
  </div>

【问题讨论】：

标签： jquery forms list parameter-passing

【解决方案1】：

给你：

$(function(){
    $('#warp-list').on('change', function() {
        $('div.user-text').attr('class', 'user-text ' + $(this).find('option:selected').val());
    });
});

例如，请参阅JSFiddle。

我之所以通过 attr 而不是 addClass 设置课程的原因是，每次更改下拉选择时，您都会不断添加其他课程。另一种方法是先尝试删除每个类选项，或者将类重置为空，然后添加“用户文本”类以及您要添加的类。

【讨论】：

也许离题，但为什么使用 on() 而不是 change()
“新的 .on() 和 .off() API 统一了在 jQuery 中将事件附加到文档的所有方式——它们的输入更短！”请参阅blog.jquery.com/2011/11/03/jquery-1-7-released 了解更多信息。简而言之，这是较新的首选活动方式。
谢谢，我真的很喜欢你在这方面的想法，我没想到会发生这种情况。不幸的是，我尝试了您的代码，但它对我不起作用。我什至尝试用分配给下拉列表的 id 替换“选择”。 $('#warp-list').on('change', function() { $('div.user-text').attr( 'class', 'user-text' + $(this).find('option:selected').val()); });
它在 jsfiddle 领域工作，因此您的代码中显然还有其他东西正在阻止它。你能发布更多代码吗？
哇，所以每当我查看页面加载后的内容时，我都会使用 $(document).ready(function() 而不是 $(function() 这真的很酷。非常感谢 Blair！我很高兴得知这一点！

【解决方案2】：

你可以使用addClass方法::

$('select').change(function(){
  var cls = $(this).val();
  $('.user-text').addClass(cls);
})

【讨论】：