1

这是我第一次使用 jQuery，我很高兴我的第一次尝试工作。在这篇文章的帮助下，我设法实现了我想做的事情，但我不禁觉得有一种更简洁的方法可以做到这一点，但无法弄清楚如何做。

基本上我有一个页面，其中包含根据所需服务级别更改价格的下拉菜单。When the select options are changed the color of the price also changes. 这些价格来自一个数据库，所以我在这里放了一个基本版本，价格不会改变，但文本颜色会改变。

每个下拉列表的 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>

这是jQuery

$('select[id^=optn0x0]').change(function(){

$('#pricediv0').removeClass('saver express expressplus').addClass(
    $(this).find('option:selected').text().toLowerCase()
);
})
.change();

$('select[id^=optn1x0]').change(function(){

$('#pricediv1').removeClass('saver express expressplus').addClass(
    $(this).find('option:selected').text().toLowerCase()
);
})
.change();

任何建议将不胜感激。

你好，

谢谢大家对此的回答

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

$('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();

和

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

任何人都可以提供任何指导，说明哪一个是最好的，因此我应该使用哪一个，因为我是 jQuery 新手，我试图了解什么是做什么的。

4

2 回答 2

0

试试这个：

$('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)
})

http://jsfiddle.net/63MQu/10/

于 2012-07-03T13:26:20.153 回答
0

你可以试试：

$('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()
    )
})​

演示

缺点是您仅限于单个字符。我建议让价格标签与相应的选择标签共享一个属性。例如，就像名称一样（开头应该是唯一的）。

td's 也不应该在表格之外使用。只需使用div或span

于 2012-07-03T13:46:34.597 回答