Question

我正在尝试创建一个包含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/

有关如何执行此操作的任何建议？

非常感谢

Answer 1

尝试

HTML

 <input type="text" id="box" data-clicked="1" value="1 = 0.00 " readonly><br>
 <input type="text" id="box1" data-clicked="2" value="2 = 0.00 +" readonly><br>
 <input type="text" id="box2" data-clicked="3" value="3 = 0.00 +" readonly><br>
 <input type="text" id="box3" data-clicked="4" value="4 = 0.00 +" readonly><br>
 <input type="text" id="box4" data-clicked="5" value="5 = 0.00 +" readonly><br>
 <input type="text" id="box5" data-clicked="6" value="6 = 0.00 +" readonly><br>

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/

通过单击每个框来更新6个带有1张幻灯片的文本框，以选择要更新的文本框

1 个答案: