0

这是我的代码：

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

它获取值并根据所选值更改这些值的 CSS。

用户选择：开始 2 结束 4

2-3-4 得到：css("背景色","红色");

虽然其余部分保持绿色，但我也希望能够像这样工作：

用户选择：开始 4 结束 2

4-1-2 得到：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 回答