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。

请帮助。 不知道为什么当我点击第二个收音机时我有警报1而不是2。

关心卢克

Answer 1

字体真棒图标与label:before绑定label:before您应该执行以下操作：

$(document).ready(function() {

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

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

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

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

Answer 2

.rating > input { display: none; } 

和

.rating2 > input { display: none; }

正在隐藏作为点击事件目标的输入。

您的标签未链接到相应的输入。 标签的for属性应该包含它对应的输入的ID。

因此，改为：

<label class = "full" for="1" title="Awesome - 5 stars"></label>

和

<label class = "full" for="2" title="Awesome - 5 stars"></label>

执行此操作后，标签还将响应（隐藏）输入的单击事件并显示正确的值。

这个小提琴演示它没有 CSS，只显示一个空的单选按钮，单击时显示正确的值：

https://jsfiddle.net/qtu3x7sn/

这个小提琴是固定版本，标签正确指向相关输入，CSS包括：

https://jsfiddle.net/qtu3x7sn/1/