Toute façon de compresser cette fonction de jquery 5 étoiles?

Question

J'essaie de réduire cela ... mais je n'arrive pas à trouver un moyen de le faire. Essentiellement, je me demande s'il existe un moyen de le compresser à 5 lignes ou plus?

Merci pour votre aide!

$(function() { 
    $('.star-one').live("click",function() { 
    $("#rate_result").html('1'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 

    $('.star-two').live("click",function() { 
    $("#rate_result").html('2'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 

    $('.star-three').live("click",function() { 
    $("#rate_result").html('3'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star3").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 

    $('.star-four').live("click",function() { 
    $("#rate_result").html('4'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star3").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star4").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 

    $('.star-five').live("click",function() { 
    $("#rate_result").html('5'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star3").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star4").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star5").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 
}); 

Voici le code html:

<div id="rate_result"></div> 
<div id="stars-container"> 
    <ul class='star-rate'> 
    <li id="star1"> 
     <a href='#' title='' class="star-one" id="1">mmmm</a> 
    </li> 
    <li id="star2"> 
     <a href='#' title='' class="star-two" id="2">try again</a> 
    </li> 
    <li id="star3"> 
     <a href='#' title='' class="star-three" id="3">mmm not bad</a> 
    </li> 
    <li id="star4"> 
     <a href='#' title='' class="star-four" id="4">this is cool ya!</a> 
    </li> 
    <li id="star5"> 
     <a href='#' title='' class="star-five" id="5">very good</a> 
    </li> 
    </ul> 
</div> 

Answer 1

est ici un peu de compression:

$(function() { 
    var star_tag = '<img src="http://larsonreviews.com/rating/star_ena.gif" border="0" alt="*">'; 
    $('.star-one').live("click",function() { 
     $("#rate_result").html('1'); 
     $("#star1").html(star_tag); 
    }); 
    $('.star-two').live("click",function() { 
     $("#rate_result").html('2'); 
     $("#star1, #star2").html(star_tag); 
    }); 
    $('.star-three').live("click",function() { 
     $("#rate_result").html('3'); 
     $("#star1, #star2, #star3").html(star_tag); 
    }); 
    $('.star-four').live("click",function() { 
     $("#rate_result").html('4'); 
     $("#star1, #star2, #star3, #star4").html(star_tag); 
    }); 
    $('.star-five').live("click",function() { 
     $("#rate_result").html('5'); 
     $("#star1, #star2, #star3, #star4, #star5").html(star_tag); 
    }); 
}); 

Answer 2

Créer une boucle pour 1 jusqu'à ce que #rate_result et Ouput $("#star" + count).html('<img />');

Answer 3

Étape 1:

Créer une variable pour contenir la chaîne url:

var img = '<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'; 

puis remplacez toutes ces chaînes avec votre variable.

$("#star1").html(img); 

Answer 4

ajouter une classe appelée étoile à chaque étoile

$('.star').live("click",function() { 
$("#rate_result").html($(this).prevAll('.star').length+1); 
$(this).prevAll('.star').addClass('enabled') // where enabled would add a background image(like star_ena.gif) 
}); 

Answer 5

Peut-être cela vous donnera une idée de comment vous pouvez compresser votre code un peu:

Turn a number into star rating display using jQuery and CSS

Ce code transforme actuellement les nombres en étoiles mais peut facilement être adapté ed pour gérer les événements de clic pour changer la valeur. Il n'est pas nécessaire de faire des éléments img distincts pour chaque étoile, la seule chose dont vous avez besoin est de deux travées qui ont les étoiles comme image d'arrière-plan et ensuite appliquer une largeur appropriée à ces travées.

Answer 6

Non testé, mais je suppose que cela fonctionnerait.

$(function() { 
var textrep=new Array("zero","one","two", "three", "four", "five"); 
for (i=1; i<=5; i++) 
{ 
$('.star-'+textrep[i]).live("click",function() { 
$("#rate_result").html(i); 
for (j=1; j<=i; j++) 
{ 
    $("#star"+j).html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
} 
}); 
    } 
});