如何在第二次单击时重置该值

时间:2015-10-01 05:38:48

标签: javascript jquery

第一次点击时,该值已被选中,但我需要在第二次点击时重置该值。

<div class="form-group">
    <label  for="CreditPoint" class="reqValidation col-lg-2 control-label" style="width: 170px; ">Credit</label>

1 个答案:

答案 0 :(得分:1)

<div class="form-group">
<label id="reset" for="CreditPoint" class="reqValidation col-lg-2 control-label" style="width: 170px;">Credit</label>
<label for="dummy" class="col-lg-1 control-label" style="width: 5px; "></label>
<div class="creditpoint creditpoint-2" class="form-control col-lg-4" style="width: 500px; ">
    <a href="#" class="creditpoint-1" alt="1" data-val="1"></a>
    <a href="#" class="creditpoint-2" alt="2" data-val="2"></a>
    <a href="#" class="creditpoint-3" alt="3" data-val="3"></a>
    <p class="creditpoint-label">Not Rated</p>
    <label style="width: 170px; ">1 Star - Good, 2 Star - Very Good, 3 Star -Excellent</label>
</div>

的Javascript

$(document).ready(function(){
    $(".creditpoint a").click (function (e){
        var rate = $(this).data("val");
        var cRate = $(".creditpoint-label").data ("rate");
        if (rate == cRate){
            rate = 0;
        }
        $(".creditpoint-label").data ("rate", rate);
        if (rate>0){
            $(".creditpoint-label").html (rate + " Star")
        }else{
            $(".creditpoint-label").html ("Not Rated")
        }
        e.preventDefault();
    });
});

CSS

.creditpoint-label {
    width:100%;
    clear:both;   
}
.creditpoint a {
    width:10px;
    height:10px;
    background:#ccc;
    position:relative;
    float:left;
    margin:20px;
}

的jsfiddle

Js Fiddle link