Question

我有这段代码有3个滑块并在输入框中显示这3个值的总和，我想要做的是在页面上显示简单的值。所以它应该在顶部有3个滑块，并且具有下面那个3显示的值，没有输入框。这是我的代码：

<head>

    <!-- Bootstrap Core CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">

  <style>
    .wrapper {
  padding: 50px;
  margin-top: 25px;
}

  </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>




</head>
<body>


<div class="wrapper">
  <input class="slider" id="ram" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
      <hr />

  <input class="slider" id="diskSpace" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
       <hr />
      <input  class="slider" id="cpu" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />

       <hr />
      <input type="text" class="form-control" id="inputValue" value="0" readonly />



      </div>

  <script>

var minSliderValue = $("#ram").data("slider-min");
var maxSliderValue = $("#ram").data("slider-max");

$('#ram').slider({
    value : 0,
    formatter: function(value) {
        return 'RAM: ' + value + 'GB';
    }
});

$('#diskSpace').slider({
    value : 0,
    formatter: function(value) {
        return 'Disk Space: ' + value + 'GB';
    }
});

$('#cpu').slider({
    value : 0,
    formatter: function(value) {
        return 'CPU : ' + value + ' Cores';
    }
});

// If You want to change input text using slider handler
$('.slider').on('slide', function(slider){

  var ram = $("#ram").val();
  var diskSpace = $("#diskSpace").val();
  var cpu = $("#cpu").val();
  $("#inputValue").val(parseInt(ram)+ parseInt(diskSpace)+ parseInt(cpu));

});


// If you want to change slider using input text
$("#inputValue").on("keyup", function() {
    var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
    this.value = val > maxSliderValue ? maxSliderValue : val;
    $('#ram','diskSpace','cpu').slider('setValue', val);
});


</script>
</body>
</html>

Answer 1

创建一个div并使用jquery这样做：

 $( "#divIdOnPage" ).html(totalValue);

Answer 2

只需添加这样的div：

<div id = "info"></div>

在你的javascript代码中执行以下操作：

$("#info").html(parseInt(ram)+ parseInt(diskSpace)+ parseInt(cpu));

这是一个有效的解决方案。希望它有所帮助！

＆＃13;

var minSliderValue = $("#ram").data("slider-min");
var maxSliderValue = $("#ram").data("slider-max");

$('#ram').slider({
    value : 0,
    formatter: function(value) {
        return 'RAM: ' + value + 'GB';
    }
});

$('#diskSpace').slider({
    value : 0,
    formatter: function(value) {
        return 'Disk Space: ' + value + 'GB';
    }
});

$('#cpu').slider({
    value : 0,
    formatter: function(value) {
        return 'CPU : ' + value + ' Cores';
    }
});

// If You want to change input text using slider handler
$('.slider').on('slide', function(slider){

  var ram = $("#ram").val();
  var diskSpace = $("#diskSpace").val();
  var cpu = $("#cpu").val();
  $("#inputValue").val(parseInt(ram)+ parseInt(diskSpace)+ parseInt(cpu));
  $("#info").html(parseInt(ram)+ parseInt(diskSpace)+ parseInt(cpu));

});


// If you want to change slider using input text
$("#inputValue").on("keyup", function() {
    var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
    this.value = val > maxSliderValue ? maxSliderValue : val;
    $('#ram','diskSpace','cpu').slider('setValue', val);
});

＆＃13;

.wrapper {
  padding: 50px;
  margin-top: 25px;
}
#info{
	font-size: 30px;
	text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
<div class="wrapper">
  <input class="slider" id="ram" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
      <hr />

  <input class="slider" id="diskSpace" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
       <hr />
      <input  class="slider" id="cpu" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />

       <hr />
  <input type="text" class="form-control" id="inputValue" value="0" readonly />



  </div>
<div id = "info"></div>

＆＃13;

在页面上显示文本而不是输入框

2 个答案: