如果仅出现错误，则需要在提交后保留星级评定值

时间：2017-08-19 22:25:15

标签： javascript jquery html css html5

我的评分脚本工作正常，但是当我提交评分并且在提交过程中出现某种错误时，星级会回归到根本不显示任何星标。例如，假设我给出两颗星的评级，然后提交评级，并且在提交过程中出现某种错误，由于某种原因，星星会回到零。即使发生错误，我希望能够保持星星和价值，因此当表单显示错误时，用户评级仍然可见，并且他们不必再次重新输入评级。然后，如果提交过程成功，则星级和值可以恢复为默认值。

这是我的JsFiddle链接https://jsfiddle.net/znoxgg6k/

JQuery的

$(document).ready(function(){
    var rating = 'eunrated';
    $('.rating-choice li')
        .on('mouseenter touchstart', function(){
            $(this).parent().removeClass($(this).parent().attr('class').split(' ')[1]);
            var classSuffix = $(this).attr('id').split('-')[1];
            $('.rating-choice').addClass('erating-' + classSuffix);
            $('.rate-this').text($(this).data('desc'));
        })
        .on('mouseleave touchend', function(){
            var classSuffix = $(this).attr('id').split('-')[1];
            $('.rate-this').text($('.rate-this').attr('data-desc'));
            $('.rating-choice').attr('class', '').addClass('rating-choice ' + rating)
        })
        .on('change click', function(e){
            e.preventDefault();
            e.stopPropagation();
            $('.rate-this').attr('data-desc', $(this).attr('data-desc'));
            rating = 'erating-' + $(this).attr('id').split('-')[1];
            $('.rating-choice').removeClass('eunrated').addClass(rating);
            $(this).find('input').prop('checked', true);
        });

        $('#clear-rating').on('change click', function(e){
            e.preventDefault();
            e.stopPropagation();
            $(this).parent().find('input:checked').prop('checked', false);
            $(this).parent().find('ul').removeClass().addClass('rating-choice eunrated');
            $('.rate-this').text($('.rate-this').attr('data-desc'));
            $('.rate-this').attr('data-desc', 'Rating').text('Rating');
            rating = 'eunrated';
        });
});

HTML 

<form method="post" action="" id="form">
    <fieldset>
        <ol>
            <li><h2 class="header">Rating:</h2></li>
            <li>
                <ul class="rating-choice eunrated">
                    <li id="rate-1" data-desc="A">
                        <label for="rating-1"><input type="radio" value="1" name="rating" id="rating-1"  />0.5 stars</label>
                    </li>
                    <li id="rate-2" data-desc="B">
                        <label for="rating-2"><input type="radio" value="2" name="rating" id="rating-2"  />1 star</label>
                    </li>
                    <li id="rate-3" data-desc="C">
                        <label for="rating-3"><input type="radio" value="3" name="rating" id="rating-3"  />1.5 stars</label>
                    </li>
                    <li id="rate-4" data-desc="D">
                        <label for="rating-4"><input type="radio" value="4" name="rating" id="rating-4"  />2 stars</label>
                    </li>
                    <li id="rate-5" data-desc="E">
                        <label for="rating-5"><input type="radio" value="5" name="rating" id="rating-5"  />2.5 stars</label>
                    </li>
                    <li id="rate-6" data-desc="F">
                        <label for="rating-6"><input type="radio" value="6" name="rating" id="rating-6"  />3 stars</label>
                    </li>
                    <li id="rate-7" data-desc="G">
                        <label for="rating-7"><input type="radio" value="7" name="rating" id="rating-7"  />3.5 stars</label>
                    </li>
                    <li id="rate-8" data-desc="H">
                        <label for="rating-8"><input type="radio" value="8" name="rating" id="rating-8"  />4 stars</label>
                    </li>
                    <li id="rate-9" data-desc="I">
                        <label for="rating-9"><input type="radio" value="9" name="rating" id="rating-9"  />4.5 stars</label>
                    </li>
                    <li id="rate-10" data-desc="J">
                        <label for="rating-10"><input  type="radio" value="10" name="rating" id="rating-10"  />5 stars</label>
                    </li>
                </ul>
                <a id="clear-rating" title="" href="#">Clear</a>
                <div class="rate-this" data-desc="Rating">Rating</div>
            </li>
        </ol>
    </fieldset>
    <fieldset>  
        <ol>
            <li><input type="submit" name="submit" value="Submit" id="submit" /></li>
        </ol>
    </fieldset>
</form>

CSS 

* {
    margin: 0;
    padding: 0;
    border: 0;
}

#form{
    padding: 2em 3% 0 3%;
}

#form ol li{
  list-style: none;
  width: 100%;
  float: left;
}

.rating-choice{
    width: 150px;
    height: 30px;
    float: left;
    margin-bottom: 1.8em;
}

.rating-choice input[type="radio"], .rating-choice label{
    height: 0 !important;
    display: none !important;
}

.rating-choice li{
    float: left !important;
    width: 15px !important;
    height: 30px !important; 
    display: block !important;
    list-style-type: none !important;
    cursor: pointer !important;
}

.header{
    font-size: 1em;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 0.2em;
    width: 100%;
}

.eunrated{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -0px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-1{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -30px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-2{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -60px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-3{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -90px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-4{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -120px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-5{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -150px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-6{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -180px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-7{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -210px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-8{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -240px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-9{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -270px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.erating-10{
    background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png');
    background-repeat: repeat-x;
    background-position: 0px -300px;
    width: 150px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

#clear-rating{
    margin-left: 1em;
}

.rate-this{
    display: inline-block;
    width: 100%;
    margin-top: .5em;
    margin-bottom: 1em;
}

1 个答案:

答案 0 :(得分：1)

通常，可以将评论存储在数据库中，作为cookie或在会话中。这些解决方案需要使用PHP，Node.js等后端。

如果您想要一个仅限前端的解决方案，您可能需要查看sessionStorage和localStorage API。

相关问题
最新问题