如何根据上一表格列中的滑块更改来更新一个表格列中的文本

Question

我有一个滑块和一个文本输入。 文本输入有一个默认值，当我将滑块滑动到其他百分比时，我想更改文本输入中显示的数字。 我想知道我应该使用哪个标签，我可以为其设置默认值，并且不会受到更改结果的影响。 我在jsfiddle中有它：

http://jsfiddle.net/8DzCE/269/

       <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 + '%');
         var percent=parseFloat(ui.value);
        var answer=nextTD.closest("input").next();
         var int=parseFloat(answer.val());
        answer.html(int * percent / 100);

    }

});

}）;

Answer 1

您可以尝试使用数据属性。 由于缺乏可访问性，有些人会反对这些。 如果那对您来说是一个问题，也许是一个具有相同值的隐藏字段？ 我想在这里回答你的问题。 我有点不清楚。

就像是

 <td><input type="text" value="528" data-default="528" class="result" id="foodanswer" /></td>

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes

Answer 2

这就是您的想法吗？

<table id="foodaverage">
    <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" data-result="foodanswer" data-default-value="528"></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" data-result="foodanswer1" data-default-value="423"></div></td>
            <td><div id="asimplevalue" class="answer"></div></td>
        <td><input type="text" value="423" class="result" id="foodanswer1" /></td>
     </tr> 
</table>



$(".slide").slider({
        value:50,
        min: 0,
        max: 100,
        slide: function(event, ui){
            var nextTD = $(this).closest("td").next();                                       
               nextTD.html(ui.value + '&#37;');
        },

        //Fires after the slider's done moving
        change: function(event, ui ){
            var result         = $(this).attr('data-result'),
                defaultValue   = parseFloat($(this).attr('data-default-value')),
                percent        = parseFloat(ui.value);

            $('#'+result).val(defaultValue * percent / 100);

        }

    });