html5 range sliders,带有2个滑块的HTML5滑块计算器(HTML5 Slider Calculator with 2 Sliders)

带有2个滑块的HTML5滑块计算器(HTML5 Slider Calculator with 2 Sliders)

我正在尝试创建一个HTML5滑块计算器。

我创建了两个具有不同范围，初始值和步长的滑块。 设置两个滑块以在用户左右移动滑块时动态更新值。 问题是我的第一个滑块更新了第二个滑块值，但第一个滑块的值保持不变。

代码如下：

echo 'Calculate Your Payments:';

echo '

';

echo 'Rate';

echo '';

echo ' 5.9 APR';

echo '

echo 'function outputUpdate(rateVal) {';

echo 'document.querySelector(\'#rate\').value = rateVal;';

echo '}';

echo '';

echo '

';

echo '

';

echo 'Term';

echo '';

echo ' 60 Months';

echo '

echo 'function outputUpdate(termVal) {';

echo 'document.querySelector(\'#term\').value = termVal;';

echo '}';

echo '';

echo '

';

这是用PHP。

车辆图像旁边是一些标签内容。 单击财务选项卡，您将看到滑块。

感谢您的帮助！

贾里德

I am trying to create an HTML5 slider calculator.

I have created two sliders with different ranges, initial values and step sizes. The two sliders are setup to update the value on the fly as the user moves the slider left and right. The problem is that my first slider updates the second sliders value, but the value of the first slider remains fixed.

The code is as follows:

echo 'Calculate Your Payments:';

echo '

';

echo 'Rate';

echo '';

echo ' 5.9 APR';

echo '

echo 'function outputUpdate(rateVal) {';

echo 'document.querySelector(\'#rate\').value = rateVal;';

echo '}';

echo '';

echo '

';

echo '

';

echo 'Term';

echo '';

echo ' 60 Months';

echo '

echo 'function outputUpdate(termVal) {';

echo 'document.querySelector(\'#term\').value = termVal;';

echo '}';

echo '';

echo '

';

This is in PHP.

Next to the vehicle image is some tabbed content. Click on the finance tab and you will see the sliders.

Thank you for your help!

Jared

原文：https://stackoverflow.com/questions/29225175

更新时间：2019-12-26 11:22

最满意答案

在JavaScript中，当多个函数具有相同的名称时，只运行要声明的最后一个函数。 请注意，代码中的两个JS函数共享相同的名称。 你的第二个outputUpdate()函数覆盖了第一个，所以只有#term才会更新。 确保函数具有不同的名称。

In JavaScript, when multiple functions have the same name, only the last one to be declared is run. Notice that both JS functions in your code share the same name. Your second outputUpdate() function is overriding the first, so only #term is getting updated. Make sure the functions have different names.

相关问答

不， HTML5范围输入只接受一个输入。 我建议您使用类似jQuery UI范围滑块的任务。 No, the HTML5 range input only accepts one input. I would recommend you to use something like the jQuery UI range slider for that task.

根据我对这个问题的回答，可以使用多个PageSlider 。 它们不会改变原始Slider的基本原理，因此.val和set_val仍然可用。 import matplotlib.widgets

import matplotlib.patches

import mpl_toolkits.axes_grid1

class PageSlider(matplotlib.widgets.Slider):

def __init__(self, ax, label, numpages = 10, v

...

在JavaScript中，当多个函数具有相同的名称时，只运行要声明的最后一个函数。 请注意，代码中的两个JS函数共享相同的名称。 你的第二个outputUpdate()函数覆盖了第一个，所以只有#term才会更新。 确保函数具有不同的名称。 In JavaScript, when multiple functions have the same name, only the last one to be declared is run. Notice that both JS functions

...

只需将其添加到您的代码中 $("#brush_size").val(localStorage['brush_size']);

$("#opacity").val(localStorage['opacity']);

Just add this to your code $("#brush_size").val(localStorage['brush_size']);

$("#opacity").val(localStorage['opacity']);

试试这个作为起点： document.querySelector("#range").addEventListener("change", function(e){

document.querySelector(".range").textContent=e.currentTarget.value;

})

这是小提琴 。 处理多个滑块时，为每个滑块添加change事件没有意义，而是使用event-delegation (将change -listener附加到包含所有滑块的父元素并自行调

...

你声明moveLeft和moveRight两次只是为slide2重命名它，它会工作 编辑： 不推荐使用您正在使用的方法，因为每次需要在同一页面上添加新滑块时都需要更改源代码(js和css) ，您应该研究如何创建插件，这将有助于您了解如何创建一个通用的滑块，同时像滑板这样的滑块的一个很好的例子是一个很好的选择，但是因为你正在尝试学习并想要清除错误，这就是为什么要添加片段并提出答案。 jQuery(document).ready(function($) {

$('#checkbox').ch

...

这可能是自动完成工作，尝试将其关闭 0

This is probably autocomplete at work, try turning it off

...

您在所有函数中使用相同的变量名称。 声明新数组时，将覆盖旧数组。 尝试声明具有不同名称的数组。 You use the same variable name in all functions. When you declare a new array you overwrite the old one. Try to declare arrays with different names.

调用一个函数，它访问其他值并将它们相加。 当然，你可以把它全部分成一个服务，缓存元素等，但你明白了。 $( function() {

var output = $('#output');

$( "#slider1" ).slider({

slide: function( event, ui ) {

output.text( getAllValues() );

}

})

...

尝试修改该处理程序： function updateSliders(event, ui) {

if (!event.originalEvent) return;

var activeSlider = this;

$(".slider").slider("value", $(activeSlider).slider("value"));

};

现在这可能会导致代码出现其他一些问题，我想，但是通过检查null“originalEvent”属性，您可以判断由于程序更新而调用“更

...