Обновите 6 текстовых полей с 1 слайдером, щелкнув по каждому окну, чтобы выбрать, какой из них обновить

Я пытаюсь создать форму с 6 текстовыми вводами, в которых их значения обновляются с помощью ползунка.

У меня нет проблем с этим, однако мне нужно, чтобы каждый ящик был активным, только когда его щелкали, дезактивируя другие и сохраняя свои значения.

Я пытаюсь сделать это с помощью этой функции:

$(document).ready(function() { 

var slider = document.getElementById('slider');
var box = document.getElementById("box");
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var box5 = document.getElementById("box5"); 

 slider.onchange = function(){
 box.value = '1 = ' + slider.value;
}

$('#box1').click(function(){
 $(this).data('clicked', true);
});

if($('#box1').data('clicked')) {
 slider.onchange = function(){
 box1.value = '2 = ' + slider.value;
}
} else {
 box.value;
}

});

http://jsfiddle.net/j3hEV/2/

Любые предложения о том, как это сделать?

большое спасибо

1 ответ

Пытаться

HTML


JS

$(document).ready(function() { 
 var slider = $("#slider"); 
 var boxes = $("[data-clicked]"); 
 $(boxes).on("click", function(e) {
 $(boxes).removeClass("clicked");
 $(e.target).addClass("clicked"); 
 }); 
 $(slider).on("change", $(boxes), function(e) { 
 $(".clicked")
 .val( $(".clicked").data("clicked")+ " = " + $(slider).val() );
 });
});

jsfiddle http://jsfiddle.net/guest271314/f86nQ/

licensed under cc by-sa 3.0 with attribution.