jQuery發送submited範圍滑塊值到遠程服務器

Question

我有一個頁面，有多個範圍滑塊匹配的提交按鈕，所以我可以提交每個滑塊值後，用戶更改它，並將其發送到一個程序運行的服務器函數返回此值的平方並將其返回給我。這是我使用的代碼：

$(window).on("load", function(){ 
     var slider = $(".slider"); 
     slider.change(function(){ 
      var output= this.value; 
      $(".formoid").submit(function(event) { 
       posting= $.get("http://192.168.4.49:8002/data", { n:output }); 
       posting.done(function(data){ 
       console.log(data) 
       }); 
      }); 
     }); 
    }); 

（HTML）

<div id='Services' style="display:none;"> 
      <span class="Content_Title"> Demand <i class="fa fa-chevron-right" aria-hidden="true"></i> Tertiary <i class="fa fa-chevron-right" aria-hidden="true"></i> Services </span> 
      <div id="svg_Services"></div> 
      <div id="slider_box"> 
      <div class="Slider"><input type="range" class="slider" min="0" max="100" name="output10"></div> 
      <b><div class="output" id="output10">value: %</div></b> 
      </div> 
      <form class="formoid" title="" method="get"> 
       <div> 
        <input type="submit" class="btn-info" id="submitButton" name="submitButton" value="Submit Value"> 
       </div> 
      </form> 
    </div> 

    <div id='Agriculture' style="display:none;"> 
     <span class="Content_Title"> Demand <i class="fa fa-chevron-right" aria-hidden="true"></i> Tertiary <i class="fa fa-chevron-right" aria-hidden="true"></i> Agriculture </span> 
     <div id="svg_Agriculture"></div> 
     <div id="slider_box"> 
      <div class="Slider"><input type="range" class="slider" min="0" max="100" name="output11"></div> 
      <b><div class="output" id="output11">value: %</div></b> 
     </div> 
     <form class="formoid" title="" method="get"> 
       <div> 
        <input type="submit" class="btn-info" id="submitButton" name="submitButton" value="Submit Value"> 
       </div> 
     </form> 
    </div> 

的問題是，每一個我提交其他滑塊的值時，我得到了前一個爲well.For例如，如果我移動第一個滑塊的值爲3，我在我的控制檯中獲得9個。如果在此之後，我將另一個滑塊移動到值2，我得到9和4.是否有人知道如何解決這個問題？

Answer 1

您並不是真的想要提交表單，因此您不需要'提交'處理程序，更不用說每次更改其中一個滑塊時都會增加的「提交」處理程序的積累。

相反，附加一個 '點擊' 處理程序：

• 抑制表單提交
• 找到按鈕的相應的滑動部件
• 執行$.get(...)...

$(window).on("load", function() { 
    $(".formoid").on('click', 'button', function(e) { // guess; adjust as necessary to delegate button click handling to the form. 
     e.preventDefault(); // prevent buttons submitting the form 
     var $slider = $(this).prev('input'); // guess; adjust as necessary to select the appropriate slider relative to the clicked button 
     $.get("http://192.168.4.49:8002/data", { n: $slider.val() }).then(function(data) { 
      console.log(data); 
     }); 
    }); 
}); 

不能看見的HTML，有交流在那裏有兩個猜測，所以準備做一些調試。

編輯：

隨着視線的HTML，javascript的就變爲：

$(window).on("load", function() { 
    $(".btn-info").on('click', function(e) { 
     e.preventDefault(); // prevent form submission. 
     var $slider = $(this.form).closest('div').find("input.slider"); 
     $.get("http://192.168.4.49:8002/data", { n: $slider.val() }).then(function(data) { 
      console.log(data); 
     }); 
    }); 
});