jQuery 投票（评级）滑块 - 可以工作，但有错误

发布于 2024-09-16 17:38:40 字数 1869 浏览 7 评论 0原文

我的问题是我无法让这个 jQuery 滑块以 0.1 为增量从 0.1 开始到 10，并在 10 处结束（停止）。想在没有 jQuery UI 或 jQuery 工具的情况下完成此操作。

我计划使用滑块位置然后使用“投票”按钮来更新隐藏的输入值。

我感谢对此项目的任何帮助。谢谢，布兰登。

我试图限制滑块仅在“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>

原文

My problem is I can't get this jQuery slider to start from .1 to 10 in .1 increments and end (stop) at 10. Would like to pull this off without jQuery UI or jQuery tools.

I plan to have the hidden input value updated using the slider position then a button that says "VOTE".

I appreciate any help with this project. Thanks, Brandon.

I'm trying to limit the slider to only move inside the "slider_container" div.I can't get the box to stop at the left and right?

<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>

分享到QQ

分享到微博