使用jQuery通过选择选项更改文本的css-如何组合多个函数_Jquery

使用jQuery通过选择选项更改文本的css-如何组合多个函数

jquery

使用jQuery通过选择选项更改文本的css-如何组合多个函数,jquery,Jquery,这是我第一次使用jQuery，我很高兴我的第一次尝试成功了。在我的帮助下，我成功地实现了我想做的事情，但我忍不住觉得有一种更整洁的方法可以做到这一点，但却无法解决如何做到这一点基本上，我有一个包含下拉列表的页面，根据所需的服务级别更改价格。当选择选项更改时，价格的颜色也会更改。这些价格来自db，所以我在这里放了一个基本版本，价格不变，但文字颜色不变每个下拉列表的id的增量如下-optn0x0、optn1x0等价格增量的div id，如pricediv0、pricediv1等我想做的

这是我第一次使用jQuery，我很高兴我的第一次尝试成功了。在我的帮助下，我成功地实现了我想做的事情，但我忍不住觉得有一种更整洁的方法可以做到这一点，但却无法解决如何做到这一点

基本上，我有一个包含下拉列表的页面，根据所需的服务级别更改价格。当选择选项更改时，价格的颜色也会更改。这些价格来自db，所以我在这里放了一个基本版本，价格不变，但文字颜色不变

每个下拉列表的id的增量如下-optn0x0、optn1x0等

价格增量的div id，如pricediv0、pricediv1等

我想做的是将jQuery代码合并到一个函数中，因为有13个下拉列表，所以它将有很多代码

这是密码

<style>
.saver{color:red;}
.express{color:black;}
.expressplus{color:blue;}
</style>

<html>

<select class="prodoption" name="optn0" id="optn0x0"><option value="68">Saver</option>
<option value="69" selected="selected">Express</option>
<option value="70">ExpressPlus</option>
</select>

<td class="cobll cpdll"><div class="prod3price"><span class="price" id="pricediv0">74.00</span></div></td>

<select class="prodoption" name="optn0" id="optn1x0"><option value="68">Saver</option>
<option value="69" selected="selected">Express</option>
<option value="70">ExpressPlus</option>
</select>

<td class="cobll cpdll"><div class="prod3price"><span class="price" id="pricediv1">74.00</span></div></td>
</html>

如有任何建议，将不胜感激

嗨

谢谢大家对这个问题的回答

我现在有两个可行的解决方案：

$('select[id^="optn"]').change(function(){
var ind = $(this).attr('id').replace('optn', '')
var cls = $(this).find('option:selected').text().toLowerCase();
$('#pricediv' + parseInt(ind) ).removeAttr('class').addClass(cls)
})
.change();

及

由于我是jQuery的新手，我正在努力了解什么是最好的，因此有谁能提供一些指导，告诉我哪一个是最好的，因此我应该使用哪一个。

试试这个：

$('select[id^="optn"]').change(function(){
    var ind = $(this).attr('id').replace('optn', '')
    var cls = $(this).find('option:selected').text().toLowerCase();
    $('#pricediv' + parseInt(ind) ).removeAttr('class').addClass(cls)
})

你可以试试：

$('select[id^="optn"]').change(function(){
    var $this = $(this);
    var n = $this.attr('id').charAt($this.attr('id').length-3);
    var p = $('#pricediv' + n);
    p.removeClass('saver express expressplus').addClass(
       $this.find('option:selected').text().toLowerCase()
    )
})

缺点是您只能使用单个字符。我建议让price标签与相应的select标签共享一个属性。比如，像名字一样，名字应该是唯一的

此外，td不应在桌子外使用。只需使用div或span

$elem.change相当于$elem.triggerchange。以这种方式触发事件没有害处。你的小提琴似乎不起作用。还有，你错过了半决赛-colon@Joey你漏了一个分号在哪里？嗨，谢谢你的回答。我现在有两个工作示例，请参见我原始问题中的编辑，我想知道哪一个最适合我的任务。我想了解两者之间的区别。@您好，欢迎您，我建议您使用此选项，它适用于每个数字optn1到optn2222，但是两者之间没有具体区别。在fiddle中，我已经提醒了一些变量值，以显示其工作原理。

$('select[id^="optn"]').change(function(){
    var ind = $(this).attr('id').replace('optn', '')
    var cls = $(this).find('option:selected').text().toLowerCase();
    $('#pricediv' + parseInt(ind) ).removeAttr('class').addClass(cls)
})

$('select[id^="optn"]').change(function(){
    var $this = $(this);
    var n = $this.attr('id').charAt($this.attr('id').length-3);
    var p = $('#pricediv' + n);
    p.removeClass('saver express expressplus').addClass(
       $this.find('option:selected').text().toLowerCase()
    )
})