1

jQuery を使用するのはこれが初めてで、最初の試みが機能することをうれしく思います。この投稿の助けを借りて、私は自分がやりたかったことを達成することができましたが、これを行うためのもっときちんとした方法があると感じずにはいられませんが、その方法はわかりません。

基本的に、必要なサービス レベルに応じて価格を変更するドロップダウンを含むページがあります。選択オプションが変更されると、価格の色も変更されます。これらの価格はデータベースから来ているので、価格は変わらないがテキストの色が変わる基本的なバージョンをここに置きました。

各ドロップダウンの ID は次のように増加します - optn0x0、optn1x0 など

価格の div id は、この pricediv0、pricediv1 などのように増分します

私がやりたいのは、jQuery コードを 1 つの関数に結合することです。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();

どんな提案でも大歓迎です。

やあ、

これについてのあなたの答えをありがとう

現在、2 つの実用的なソリューションがあります。

$('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、 はテーブルの外で使用しないでください。divまたはを使用するだけですspan

于 2012-07-03T13:46:34.597 に答える