jquery - 使用 jQuery 选择数据 ID

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为 justthis或$(this).

例如，下面的作品。单击此处进行演示。

$(".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). Doing$(this)调用 jQuery 函数，并创建一个仅包含 this 的新 jQuery 对象——因为你不需要这样做（传递 this 就可以了）你应该避免这样做

基于上述，编辑 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() 方法通过引用属性来访问数据。

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