jQuery 加载错误的值

我正在使用一些滑块，这些滑块是我购买的引导主题的一部分。我不太擅长jQuery，我需要帮助才能正确加载此负载。 它从文件前面的一些 php 代码中提取初始值，工作正常，但问题在于初始加载时，它将"$（"#mechanicalCondition"）.val（）' 中的值放入机械连接、内部连接和外部条件的所有三个隐藏输入中。 如果我移动滑块，它们会自行纠正。我很确定我需要创建一个唯一的名称而不是使用"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>