Question

我正在使用一些滑块，这些滑块是我购买的bootstrap主题的一部分。我对jQuery不是很了解，我需要帮助来正确地加载这个。它正在从文件中较早的某些PHP代码中提取初始值，但工作正常，但问题是在初始加载时将值放入'$（“＃mechanicalCondition”）。val（）'到所有三个隐藏的输入中mechanicalCondtion，interiorCondtion和exteriorCondition。如果我移动滑块，它们会自行纠正。我很确定我需要创建一个唯一的名称，而不是使用'this'，但我不知道如何在jQuery中做到这一点。提前致谢。 这是脚本。

<script>
    $("#slider-example > span").each(function() {
        var value;
        value = parseInt($(this).text(), 10);
        return $(this).empty().slider({
          value: value,
          range: "min",
          animate: true,
          orientation: "vertical"
        });
    });

    $("#slider-example1").slider({
        value: <?=$mechanical?>,
        min: 1,
        max: 10,
        step: 1,
        slide: function(event, ui) {
          $("#mechanicalCondition").val(ui.value);
          return $("#slider-example1-amount").text(ui.value + " stars");
        }
     });

     $("#slider-example1-amount").text($("#slider-example1").slider("value") + " stars" );
     $("#mechanicalCondition").val($("#slider-example1").slider("value") );

    $("#slider-example2").slider({
        value: <?=$interior?>,
            min: 1,
            max: 10,
            step: 1,
            slide: function(event, ui) {
              $("#interiorCondition").val(ui.value);
              return $("#slider-example2-amount").text(ui.value + " stars");
            }
      });

    $("#slider-example2-amount").text($("#slider-example1").slider("value") + " stars");
    $("#interiorCondition").val($("#slider-example1").slider("value") );

    $("#slider-example3").slider({
        value: <?=$exterior?>,
        min: 1,
        max: 10,
        step: 1,
        slide: function(event, ui) {
            $("#exteriorCondition").val(ui.value);
            return $("#slider-example3-amount").text(ui.value + " stars");
        }
      });

      $("#slider-example3-amount").text($("#slider-example1").slider("value") + " stars");
      $("#exteriorCondition").val($("#slider-example1").slider("value") );

这是php部分。

 <div class='form-group'>
  <strong>Mechanical Condition</strong>
    <div class='text-right'>
        <small id='slider-example1-amount'></small>
        <input type="hidden" id="mechanicalCondition" name="mechanicalCondition" value="">
    </div>
    <div id='slider-example1' style='margin-bottom: 20px; clear: both;'>
    </div>
 </div>

 <div class='form-group'>
    <strong>Interior Condition</strong>
       <div class='text-right'>
          <small id='slider-example2-amount'></small>
          <input type="hidden" id="interiorCondition" name="interiorCondition" value="">
       </div>
      <div id='slider-example2' style='margin-bottom: 20px; clear: both;'>    
      </div>
 </div>

  <div class='form-group'>
    <strong>Exterior Condition</strong>
    <div class='text-right'>
        <small id='slider-example3-amount'></small>
        <input type="hidden" id="exteriorCondition" name="exteriorCondition" value="">
    </div>
    <div id='slider-example3' style='margin-bottom: 20px; clear: both;'>    
    </div>
</div>

Answer 1

尝试更改

$("#slider-example2-amount").text($("#slider-example1").slider("value") + " stars");
$("#interiorCondition").val($("#slider-example1").slider("value") );

要：

$("#slider-example2-amount").text($("#slider-example2").slider("value") + " stars");
$("#interiorCondition").val($("#slider-example2").slider("value") );

和

$("#slider-example3-amount").text($("#slider-example1").slider("value") + " stars");
$("#exteriorCondition").val($("#slider-example1").slider("value") );

要：

$("#slider-example3-amount").text($("#slider-example3").slider("value") + " stars");
$("#exteriorCondition").val($("#slider-example3").slider("value") );

jQuery加载错误的值

1 个答案: