2010-09-01 20 views
0

我的問題是我無法得到這個jQuery滑塊從.1增加到10,並在10結束(停止)。想拉這個沒有jQuery UI或jQuery工具。jQuery投票(評分)滑塊 - 工作,但有錯誤

我打算使用滑塊位置更新隱藏的輸入值,然後是一個說「VOTE」的按鈕。

我很感謝這個項目的任何幫助。謝謝,布蘭登。

我想限制滑塊只能在「slider_container」div內移動,我無法讓框停在左右兩側?

<HTML> 
<HEAD> 
<script type="text/javascript"> 
<!-- 
$(function() { 
    var sliderMouseDown = false; 
    var count = 0; 
    $("#slider").mousedown(function() { 
     sliderMouseDown = true; 
    }); 
    $(document).mousemove(function(evnt) { 
     if (sliderMouseDown) { 
      count = count + .1; 
      $("#vote").html(count); 
     } 
    }); 
    $(document).mouseup(function() { 
     if (sliderMouseDown) 
     { 
      $("#slider").focus(); 
      count = 0; 
      sliderMouseDown = false; 
     } 
    }); 
}); 

var x1 = 0; 
var drag = false; 
$(document).ready(function(e){ 
$('#slider').mousedown(function(e){ 
e.preventDefault(); 
x1 = e.pageX - parseInt($('#slider').css('left')); 
drag = true; 
}) 
$(document).mouseup(function(e){ drag = false; }) 
$(document).mousemove(function(e){ 
if(!drag) return 
$('#slider').css('left',eval(e.pageX - x1)+'px') 
}) 
}); 

//--> 
</script> 
<style type="text/css"> 
#slider_container { background: url(images/rating-slider-bg.jpg) repeat-x; width: 200px; height: 22px; background-color: #ffffff; display:block; position: relative; z-index: 1; } 
#slider { background: url(images/rating-slider.jpg) no-repeat; width: 10px; height: 35px; top: -4px; position: absolute; left:0; cursor: pointer; cursor: hand; z-index: 99; } 
</style> 
</HEAD> 
<BODY> 
<br><br><br><br><br><br> 

<center> 
<div id="slider_container"><div id="slider"></div></div> 
<div id="vote" class="vote"></div> 
</center> 

</BODY> 
</HTML> 
+0

我不同意將此視爲「不是真正的問題」。直到我讀完最後兩行時,我纔想到同樣的事情。 @Brandon,請將代碼發佈到您的滑塊,以便我們不必搜索它。 – 2010-09-01 15:56:35

回答