За последние 24 часа нас посетили 53779 программистов и 1683 робота. Сейчас ищут 889 программистов ...

Изменение стиля label, привязанного к радиокнопке

Тема в разделе "JavaScript и AJAX", создана пользователем zevilz, 19 май 2012.

  1. zevilz

    zevilz Активный пользователь

    С нами с:
    14 июн 2010
    Сообщения:
    182
    Симпатии:
    0
    На сайте реализована форма оценки контента в виде радиокнопок со значением величины оценки. Убрал оформление радиокнопок и сделал фоновое изображение для каждой радиокнопки. Фон выбранной оценки получает другой стиль. Но не корректно отображается в разных браузерах. Решил спрятать радиокнопки и приделать к каждой из них label с соответствующим изображением. Все вроде как работает нормально, но не могу присвоить стиль label при активации радиокнопки. Сделал через скрипт вот так:
    Код (Text):
    1.  
    2.     $("input#score-1").focus(function() {
    3.         $("#vote_1").addClass("vote_1_hover").removeClass("vote_1");})
    4.     .blur(function() {
    5.         $("#vote_1").removeClass("vote_1_hover").addClass("vote_1");});
    6.  
    7.     $("input#score-2").focus(function() {
    8.         $("#vote_2").addClass("vote_2_hover").removeClass("vote_2");})
    9.     .blur(function() {
    10.         $("#vote_2").removeClass("vote_2_hover").addClass("vote_2");});
    11.  
    12.     $("input#score-3").focus(function() {
    13.         $("#vote_3").addClass("vote_3_hover").removeClass("vote_3");})
    14.     .blur(function() {
    15.         $("#vote_3").removeClass("vote_3_hover").addClass("vote_3");});
    16.  
    17.     $("input#score-4").focus(function() {
    18.         $("#vote_4").addClass("vote_4_hover").removeClass("vote_4");})
    19.     .blur(function() {
    20.         $("#vote_4").removeClass("vote_4_hover").addClass("vote_4");});
    21.  
    22.     $("input#score-5").focus(function() {
    23.         $("#vote_5").addClass("vote_5_hover").removeClass("vote_5");})
    24.     .blur(function() {
    25.         $("#vote_5").removeClass("vote_5_hover").addClass("vote_5");});
    Код формы:
    Код (Text):
    1. <form id="vote_form" action="vote_res_video.php" method="post" name="vv">
    2.     <label id="vote_1" class="vote_1" for="score-1"></label><input id="score-1" name="score" type="radio" value="1">
    3.     <label id="vote_2" class="vote_2" for="score-2"></label><input id="score-2" name="score" type="radio" value="2">
    4.     <label id="vote_3" class="vote_3" for="score-3"></label><input id="score-3" name="score" type="radio" value="3">
    5.     <label id="vote_4" class="vote_4" for="score-4"></label><input id="score-4" name="score" type="radio" value="4">
    6.     <label id="vote_5" class="vote_5" for="score-5"></label><input id="score-5" name="score" type="radio" value="5">
    7.     <input name="submit" type="submit" value="Оценить">
    8.         ...
    9. </form>
    Подставлял в скрипт click и change вместо focus - работает, но вот focus не хочет работать. Где у меня в скрипте косяк? Заранее спасибо за ответы.

    P.S.При первом способе работает нормально в хроме, но некорректно в опере и iceweasel (не удаляется оформление радиокнопок)
    Во втором случае при использовании label'ов и скрипта все наоборот (не меняются стили при нажатии)