Jquery点击函数+css

Question

我不知道我做错了什么。这是简单的代码，但不起作用。

<div id="demo1" class="rating">
<input class="stars" type="radio" id="1" name="rating" value="1" />
<label class = "full" for="star5" title="Awesome - 5 stars"></label>
</div>

<div id="demo2" class="rating2">
<input class="stars" type="radio" id="2" name="rating" value="1" />
<label class = "full" for="star5" title="Awesome - 5 stars"></label>
</div>

  $(document).ready(function () {

                    $("#demo2 input.stars").click(function () {
                             alert('2');       
                        });

                        $("#demo1 input.stars").click(function () {
                              alert('1');        
                        });  
                    });

这段代码工作正常(当我单击第一个单选按钮时，它是警报“1”，当单击第二个单选按钮时，它是警报“2”)。

但是......使用这个CSS:

       <style>
        /****** Rating Starts *****/
        @import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

        fieldset, label, span { margin: 0; padding: 0; }
        body{ margin: 20px; }
        h1 { font-size: 1.5em; margin: 10px; }

        .rating { 
            border: none;
            float: left;
        }

        .rating > input { display: none; } 

        .rating > label:before { 
            margin: 5px;
            font-size: 1.25em;
            font-family: FontAwesome;
            display: inline-block;
            content: "\f005";
        }

                    .rating2 { 
            border: none;
            float: left;
        }


        .rating > label { 
            color: #ddd; 
            float: right; 
             cursor:pointer;
        }

        .rating2 > label { 
            color: #ddd; 
            float: right; 
             cursor:pointer;
        }





                    .rating2 > input { display: none; } 

        .rating2 > label:before { 
            margin: 5px;
            font-size: 1.25em;
            font-family: FontAwesome;
            display: inline-block;
            content: "\f164";       
        }


    </style>  

...使用这个 css，我总是收到警报 1。

请帮忙。不知道为什么当我点击第二个 radio 时我收到警报 1 而不是 2。

问候卢克

Answer 1

字体很棒的图标与label:before绑定(bind)在一起，所以你应该这样做:

$(document).ready(function() {

  $("#demo2 label").click(function() {
    alert('2');
  });

  $("#demo1 label").click(function() {
    alert('1');
  });
});

完整示例在这里 https://jsfiddle.net/496bgx53/

使用输入值更新 https://jsfiddle.net/496bgx53/1/