如何更改根據滑塊更改顯示的文本

-3

我有一個滑塊和一個文本輸入。有一個文本輸入的默認值，我想使滑動到不同百分比的滑塊時，文本輸入中顯示的數字發生變化。我想知道哪個標籤我應該使用，我可以設置一個默認值，它不會受到更改結果的影響。我有它在的jsfiddle： http://jsfiddle.net/8DzCE/266/如何更改根據滑塊更改顯示的文本

<table id="foodaverage" style> 
    <tr> 
     <td align="center">Average amount</td> 
     <td></td> 
     <td><div id="foodcarb" style="display: inline;">carbon footprint(<p id="unit" style="font-size: 10px; display: inline;">tons CO<sub>2</sub>)</p></div></td> 
    </tr> 
    <tr> 
     <td><div id="simpleslider" class="slide"></div></td> 
     <td><div id="simplevalue" class="answer"></div></td> 
     <td><input type="text" value="528" class="result" id="foodanswer" /></td> 
    </tr> 
    <tr> 
     <td><div id="qslider" class="slide"></div></td> 
     <td><div id="asimplevalue" class="answer"></div></td> 
     <td><input type="text" value="423" class="result" id="foodanswer1" /></td> 
    </tr> 

</table>

的jQuery：

$(".slide").each(function(i,item){ 
    $(item).slider({ 
     value:50, 
     min: 0, 
     max: 100, 
     slide: function(event, ui){ 
      var nextTD = $(this).closest("td").next(); 

      nextTD.html(ui.value + '&#37;'); 
      var percent=parseFloat(ui.value); 
      var answer=nextTD.closest("td").next("input"); 
      var int=parseFloat(answer.val()); 
      answer.text(int * percent/100); 
     } 
    }); 
});

來源

2014-04-11 user3371790

你能澄清一下你的問題嗎？ – hyperdrive

我沒有看到在你的小提琴任何地方的文字輸入。 –

http://jsfiddle.net/8DzCE/266/ – user3371790

看這個updated fiddle。我相信你只是有你的選擇錯誤answer。我會說雖然這不是獲取對象的最佳方法，但最好使用ID，OR類並通過父對象引用它們（擺脫所有那些最接近的，接下來的等等）。但現在我只是改變了選擇這樣：

var answer = nextTD.closest("td").next("td").closest("td").children("input");

Here is an update per the comments below。

來源

2014-04-11 19:04:14 Goose

更新的小提琴有我遇到的同樣的問題。文本值將根據當前文本值而改變。當我滑塊在100％的位置，它將永遠不會回到原來的結果。 – user3371790

這個數字是錯誤的，因爲你的計算結果是關閉的。你不斷乘以文本框中數字的百分比，這意味着它正在呈指數級增長或變小。如果您想根據初始靜態值進行計算，則需要在某處指定。我更新了答案，在第二個小提琴中使用隱藏的輸入字段來存儲初始值。（但是你真的可以將它們存儲在任何地方 – Goose

如何更改根據滑塊更改顯示的文本

回答

相關問題