Question

我在javascript中定义了一个函数来显示jQuery滑块，如下所示：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 <script>

 function loadSliders(){
    $(".slider-range").slider({
            range:   true,
            min: 0,
            max: 100,
            values: [20, 80],
            slide: function( event, ui ) {
               // find any element with class .amount WITHIN scope of $this
               $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
            }
        });
  }

$(document).ready(function() {
    loadSliders();
});
</script>

我在我的html代码中使用它如下：

<span class="amount"> </span>
<div class="slider-range"> </div>

上面的代码显示了一个滑块，当我滑动它时，我看到值也在变化。基本上，一切似乎都很好。

但是，我在writeQuestions()添加了另一个函数<script>，如下所示：

<script>
function writeQuestions(){  
question_html = '<span class="amount"> </span><div class="slider-range"> </div>';
document.getElementById("questions").innerHTML = question_html;
        }

function loadSliders(){
    $(".slider-range").slider({
            range:   true,
            min: 0,
            max: 100,
            values: [20, 80],
            slide: function( event, ui ) {
               // find any element with class .amount WITHIN scope of $this
               $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
            }
        });
  }

$(document).ready(function() {
            loadSliders();
            writeQuestions();    
        });
</script>

现在当我按如下方式运行html时：

<div id="questions"></div>

不显示滑块。为什么？？我这样做的原因很难解释，因为我需要在writeQuestions（）函数中添加大量的东西，我希望能够使用它。在我看来，.innerHTML命令导致了一些问题。任何想法如何解决这个问题？

Answer 1

您有一个未关闭<div class="slider-range" </div>的标记，并且您在第二个脚本中缺少右括号：

不正确：

$(document).ready(function () {
    loadSliders();
    writeQuestions();
}

正确：

$(document).ready(function () {
    loadSliders();
    writeQuestions();
});

工作示例：https://codepen.io/srm985/pen/pVPYYp

Answer 2

功能的顺序错误。您在创建滑块之前正在初始化滑块。请参阅以下评论。

function writeQuestions() {
  question_html = '<span class="amount"> </span><div class="slider-range"> </div>';
  document.getElementById("questions").innerHTML = question_html;
}

function loadSliders() {
  $(".slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function(event, ui) {
      $(this).parent().find(".amount").html(ui.values[0] + " - " + ui.values[1]);
    }
  });
}

$(document).ready(function() {
  writeQuestions(); // create slider first
  loadSliders(); // then initialize the slider
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="questions"></div>

使用innerHTML

2 个答案: