Question

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

       <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("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/en-US/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);

        }

    });

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

2 个答案: