Question

我已经在我的网站上实现了一个价格滑块，目的是制作一个与onclick功能配合使用的ajax过滤器，并且能够在点击id slider-range时发送值，但我需要只要金额发生变化，就可以获得金额的价值。我之前还检查了一些不使用代码的问题。

$(document).ready(function() {
    function showValues() {
		$("#productContainer").css("opacity",0.5);
		$("#loaderID").css("opacity",1);
		
		//e.css('visibility','visible');
		
				
		var mainarray = new Array();
		var pricearray1 = new Array();		
		$('#amount').each(function(){			
			pricearray1.push($(this).val());
			$('.spanpricecls').css('visibility','visible');		
		});
		if(pricearray1=='') $('.spanpricecls').css('visibility','hidden');
		var price_checklist1 = "&price_range1="+pricearray1;
		
		var main_string = price_checklist1;
		main_string = main_string.substring(1, main_string.length)
		alert(main_string);
      		
      $.ajax({
			type: "POST",
			url: "../../filter_products1.php",
			data: main_string, 
			cache: false,
			success: function(html){
				//alert(html);
				$("#productContainer").html(html);		
				$("#productContainer").css("opacity",1);
				$("#loaderID").css("opacity",0);
				
				
				
			}
			});
		
		
	}
   //calling ajax on selector 	
$("input[type='checkbox'], input[type='radio'], div#slider-range").on( "click", showValues );
  
  $(".spanpricecls").click(function(){
		$('.price_range').removeAttr('checked'); showValues();
		$('.spanpricecls').css('visibility','hidden');
	});
  
	$(".clear_filters").click(function(){
		$('#productCategoryLeftPanel').find('input[type=checkbox]:checked').removeAttr('checked');
		$('#productCategoryLeftPanel').find('input[type=radio]:checked').removeAttr('checked');
		showValues();
	});
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });
  </script>
</head>
<body>
 
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>
  <div id=" productContainer">
vxzcvcxzvvczzzzzzzxc
  
  </div>

 
</body>
</html>

ajax用于获取更改

0 个答案: