0

これは私のコードです:

http://jsfiddle.net/8ErDu/6/

値を取得し、選択した値に基づいてそれらの値の CSS を変更します。

ユーザーが選択: 開始 2 終了 4

2-3-4 get: css( "背景色","赤" );

残りは緑色のままですが、これを次のように機能させたいと考えています。

ユーザーが選択: 開始 4 終了 2

4-1-2 get: css( "背景色","赤" );

これを行う方法がわからないので、ここでちょっと迷っています。どんな提案も大歓迎です。

ここに投稿されたJSfiddle：

html:

<form id="priceCalcForm">

    <p>from color</p>
    <select name="from_color" id="from_color" 
        style="width:25%;text-align:center;font-weight:bold;" 
        onchange="placeColor()"
    >     
        <option value="" name="" selected="selected">....</option>
        <option value="tp1" name="">01</option>  
        <option value="tp2" name="">02</option>  
        <option value="tp3" name="">03</option>  
        <option value="tp4" name="">04</option>
    </select>

    <p>to color</p>
    <select name="to_color" id="to_color" 
        style="width:25%; text-align:center; font-weight:bold;" 
        onchange="placeColor()"
    >
        <option value="" name="" selected="selected">....</option>
        <option value="te1" name="">01</option>  
        <option value="te2" name="">02</option>  
        <option value="te3" name="">03</option>  
        <option value="te4" name="">04</option>
    </select>

    <table id="timer_table" cols="24" width="100%" 
        style="text-align:center; background-color:#80A74C"
    >
        <tr style="border-style:outset; border-color:green;">
            <td id="color1">01</td>
            <td id="color2">02</td>
            <td id="color3">03</td>
            <td id="color4">04</td>
        </tr>

        <div id="totalPrice"></div>
    </table>

</form>

JS:

var picked_time = {};
for(var i = 1; i <= 23; i++ ) { // loop the rest
    picked_time['tp'+i] = i;
}

var end_time = {}; 
for(var i = 1; i <= 23; i++ ) { // loop the rest
    end_time['te'+i] = i;
}

function placeColor() {

    var evF = 0; // end values 0
    var evT = 0; // end values 0

    var theForm = document.forms["priceCalcForm"]; // target form

    var from_color = theForm.elements["from_color"]; // target from level <select>
    var to_color = theForm.elements["to_color"]; // target from level <select>

    evF = picked_time[from_color.value]; // get the value etc from there
    evT = end_time[to_color.value]; // get the value etc from there

    $( 'td[id^="color"]' ).css( "background-color", "" );

    if (evF <= evT) {
        for( var index = evF - 1; index < evT; index++ ) {
            $( "#color" + ( index + 1 ) ).css( "background-color", "red" ); 
        };
    };
};
4

2 に答える 2

1

これを試して：

if (evF > 0 && evT > 0) {
    for( var index = evF; index != evT; index = (index+1) %5 ) {
        $( "#color"+( index ) ).css( "background-color","red" ); 
    };
    $( "#color"+( index ) ).css( "background-color","red" );
};

フィドル

+ 1 のセル数はどこ5にありますか。そのようにハードコーディングしない方がよいでしょう。

于 2013-02-25T21:33:07.463 に答える
0

コードのこの部分を変更して、インデックス変数を手動で処理します。

for( var index = evF - 1; index < evT; index++ ) {
  $( "#color"+( index + 1 ) ).css( "background-color","red" ); 
};

例：

var index;
var i = 0;
while(i < Math.abs(evT-evf)) {
  index = evf+i;
  if (index > MAX_INDEX) {
    index -= MAX_INDEX;
  }
  i++;
}
于 2013-02-25T21:32:57.997 に答える