Question

我在转换这个5星评级脚本时遇到了麻烦，该脚本完全符合jquery修订日期：2006-09-07 10:12:12 +0200（2006年9月7日）$ * $ Rev：276 $

这是addclass，removeclass，.extend函数，我认为是问题，但我似乎无法成功将其转换为与jquery v1.3.2一起使用？

真的需要这个尽快工作。

感谢您的帮助... stackoverflow.com ROCKS！

以下是你怎么称呼它：

<script type="text/javascript">
$(document).ready(function() {
$('#rate1').rating('postid', { maxvalue:5 });
});
</script>
<div id="rate1" class="rating">&nbsp;</div>

继承人css：

.rating {
    cursor: pointer;
    margin: 0em;
    display: block;
    float:left;
}
.rating:after {
    content: '.';
    display: block;
    height: 0;
    width: 0;
    clear: both;
    visibility: hidden;
}
.cancel,
.star {
    float: left;
    width: 25px;
    height: 25px;
    overflow: hidden;
    text-indent: -999em;
    cursor: pointer;
}
.cancel,
.cancel a {background: url(delete.gif) no-repeat 0 -25px;}

.star,
.star a {background: url(star.gif) no-repeat 0 0px;}

.cancel a,
.star a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: 0 0px;
}

div.rating div.on a {
    background-position: 0 -25px;
}
div.rating div.hover a,
div.rating div a:hover {
    background-position: 0 -50px;
}

以下是评级脚本：

function postrating(i) {
    $("#rate_result").html(i);
}

function doSubmit() {
         var rating = $('#result').html();
         var reviewid = $('#reviewid').html();
         if(rating == '1') {
            alert('Are you kidding me!');
         }
         if(rating == '5') {
            alert('Thanks for the 5 star rating!');
         }
         alert(rating);
         alert(reviewid);
}

$.fn.rating = function(id, options) {
    if(id == null) return;
    var settings = {
        id       : id, // post changes to 
        maxvalue  : 5,   // max number of stars
        curvalue  : 0    // number of selected stars
    };
    if(options) {
       $.extend(settings, options);
    };
    $.extend(settings, {cancel: (settings.maxvalue > 1) ? true : false});
    var container = jQuery(this);
    $.extend(container, {
            averageRating: settings.curvalue,
            id: settings.id
        });
    for(var i= 0; i <= settings.maxvalue ; i++){
        var size = i
        if (i == 0) {
            if(settings.cancel == true){
                 var div = '';
                 container.append(div);
            }
        } 
        else {
             var div = '<div class="star"><a href="javscript:void(0)" onclick="javscript:postrating('+ i +');" title="'+i+' out of 5">'+i+'</a></div>';
             container.append(div);
        }
    }
    var stars = $(container).children('.star');
    stars
            .mouseover(function(){
                event.drain();
                event.fill(this);
            })
            .mouseout(function(){
                event.drain();
                event.reset();
            })
            .focus(function(){
                event.drain();
                event.fill(this)
            })
            .blur(function(){
                event.drain();
                event.reset();
            });
            stars.click(function(){
            if(settings.cancel == true) {
            settings.curvalue = stars.index(this) + 1;
            $.post(container.id, {
                "rating": $(this).children('a')[0].href.split('#')[1] 
            });
            return false;
            }
            else if(settings.maxvalue == 1) {
            settings.curvalue = (settings.curvalue == 0) ? 1 : 0;
            $(this).toggleClass('on');
            $.post(container.id, {
                "rating": $(this).children('a')[0].href.split('#')[1]
            });
            return false;
        }
        return true;
    });
    var event = {
        fill: function(el){ // fill to the current mouse position.
            var index = stars.index(el) + 1;
            stars
                .children('a').css('width', '100%').end()
                .lt(index).addClass('hover').end();
        },
        drain: function() { // drain all the stars.
            stars
                .filter('.on').removeClass('on').end()
                .filter('.hover').removeClass('hover').end();
        },
        reset: function(){ // Reset the stars to the default index.
            stars.lt(settings.curvalue).addClass('on').end();
        }
    }        
    event.reset();
    return(this);
}

Answer 1

.lt()不是一个合适的功能。您正在寻找:lt()选择器。使用.filter以使用:lt()选择器。检查您编写.lt(foo)的代码，然后编写类似：

的内容

.filter(":lt(" + foo + ")")

或者，您可能需要查看.prevAll()

转换5星评级脚本以使用jQuery v1.3.2时遇到问题

1 个答案: