2013-10-01 2 views
-1

Использование jQuery Я хочу, чтобы выбрать рейтинг данных с помощью переключателей, когда пользователь нажимает на одну из кнопок?Выберите идентификатор данных, используя 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) 

}); 
+1

Вы сказали нам, что вы пробовали, теперь расскажите нам, что с ним не так. Что оно делает? Почему это не так? Что он должен делать на самом деле? –

+0

Ваши две кнопки имеют одинаковый идентификатор, это недопустимый html. – Raidri

+0

'$ this' не определено. Вот почему ваш код не работает. Это было бы очень ясно, если бы вы отправились на консоль, если у вас нет других подобных функций, где вам не удалось использовать ключевое слово 'var', которое могло бы установить глобальное' $ this'. –

ответ

1

Попробуйте это, не было идентификатор в элементе, так что я не догадался, вы имели в виду данные пятну идентификатор

$(".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) 

}); 
2

Ниже будет работать :

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

EDIT 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) 
}); 

EDIT 2: Цитирование комментария Энтони заначки в.

контекст (т.е. второй аргумент ) может быть либо DOM-элемент или JQuery объект. this является элементом DOM, поэтому вы можете передать его напрямую: $('input', this). Выполнение $(this) вызывает функцию JQuery, и создает новый JQuery объект просто содержит это - так как вам не нужно сделать (проходя это прекрасно работает), вы должны избегать делать это

основе приведенный выше ответ предоставляется по адресу EDIT 1 является предпочтительным вариантом.

+0

Нет абсолютно никакой причины делать '$ (это)' (и по крайней мере несколько причин ** не ** для этого). –

+0

Пожалуйста, объясните мне, чтобы я мог понять их и прекратить использовать. Я предполагаю, что это могло бы добавить еще большую ценность для ответа. Боковое замечание, он работает только так, в скрипке '$ this' не работает. – Harry

+4

Контекст (этот второй аргумент) может быть либо элементом DOM, либо объектом jQuery. 'this' является элементом DOM, поэтому вы можете передать его напрямую:' $ ('input', this) '. Выполнение '$ (this)' вызывает функцию jQuery и создает новый объект jQuery, просто содержащий 'this', поскольку вам не нужно это делать (передача' this' работает просто отлично) вам следует избегать этого. –

0

Вы можете попытаться получить доступ к данным, указав атрибуты, используя .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); 
}); 
Смежные вопросы