Question

使用jQuery我希望能够在用户点击其中一个按钮时从单选按钮中选择数据评级？

<label class="ratingStar"><input type="radio" name="spotRating" id="_1of5" data-rating="1" data-spot-id="1" class="rating-system" /></label>
<label class="ratingStar"><input type="radio" name="spotRating" id="_1of5" data-rating="2" data-spot-id="2" class="rating-system" /></label>

我试过以下

$(".ratingStar").on("click", function(){

    selected_rating = $('input', $this).data("rating");
    selected_id = $('input', $this).data("id");


    console.log(selected_rating)

});

Answer 1

以下内容可行：

$(".ratingStar").on("click", function () {
    selected_rating = $('input', $(this)).data("rating");
    selected_id = $('input', $(this)).data("spot-id");
    console.log(selected_rating)
});

编辑1：如果我们将data("id")修改为$this或this，实际上它甚至适用于$(this)。

例如，以下作品。点击here进行演示。

$(".ratingStar").on("click", function () {
    selected_rating = $('input', this).data("rating");
    selected_id = $('input', this).data("id"); // data("spot-id") also works
    console.log(selected_rating)
});

编辑2：引用Anthony Grist的评论。

上下文（第二个参数）可以是 DOM元素或者 jQuery对象。 this是 DOM元素，因此您可以直接传递它： $('input', this)。执行$(this)调用jQuery函数并创建一个新的jQuery对象只是包含这个 - 因为你不需要这样做（传递这个工作正常）你应该避免这样做

根据上述内容， EDIT 1 下提供的答案是首选方案。

Answer 2

试试这个，元素中没有id所以我猜你的意思是data-spot-id

$(".ratingStar").on("click", function(){
    selected_rating = $('input', this).data("rating");
    selected_id = $('input', this).data("spot-id"); //Changed to spot-id


    console.log(selected_rating)

});

Answer 3

您可以尝试使用.attr() method参考属性来访问数据。

$(".ratingStar").on("click", function(){
    selected_rating = $('input', $this).attr("data-rating");
    selected_id = $('input', $this).attr("data-spot-id");
    console.log(selected_rating);
});

使用jQuery选择data-id

3 个答案: