Выберите только нажатую кнопку JQuery
У меня есть эта функция ajax, которая должна изменить стиль нажатой кнопки, но она почему-то не работает. Я не получаю никаких ошибок в консоли, и вызов ajax выполнен успешно. Любая идея, что здесь не так?
function AcceptOffer(id)
{
var json = {
id : id
};
$.ajax({
type: 'POST',
url: "@Url.Action("AcceptOffer", "Product")",
dataType : "json",
data: {"json": JSON.stringify(json)},
success: function() {
$(this).text("Accepted");
$(this).css("background-color", "green");
$(this).css("color", "white");
$(this).attr('disabled', true);
},
error: function(data) {
alert('Some error');
window.location.reload();
}
});
}
</script>
HTML:
<a href = "javascript:void(0)" onclick = "AcceptOffer('@item.OfferId')" class = "btn btn-default acceptbtn">Accept</a>
@ScottMarcus Отредактировано
Ну, во-первых, вы не должны использовать гиперссылку ни для чего, кроме навигации. Практически любой визуальный элемент поддерживает событие click, и вам, вероятно, следует просто использовать button, чтобы запустить какой-то код. Кроме того, вы не должны использовать встроенные атрибуты событий, такие как onclick, а вместо этого использовать современный стандарт .addEventListener().
@ScottMarcus да ... console.info(this) просто печатает случайные вещи, у него нет ссылки на тег привязки
Ну вот и все. Вы ссылаетесь не на тот элемент. Что он печатает? Кроме того, поскольку в настоящее время вы используете гиперссылку, знайте, что гиперссылки не имеют атрибута disabled.
Вероятно, вам следует просто ссылаться на элемент напрямую, а не использовать this.
@ScottMarcus есть идеи, как это сделать, если у меня есть более одного тега привязки с одним и тем же классом?
Есть несколько способов... Вы можете найти его по его относительному положению с каким-либо другим элементом, вы можете найти его по id, вы можете найти его по числовому индексу всех подобных элементов, вы также можете просто дать ему дополнительный класс, которого нет у других элементов. Но опять же, вы не должны использовать якоря для этого в первую очередь.
@ScottMarcus, чтобы я не использовал теги a в следующий раз, какой тег будет наиболее подходящим для этих случаев?
Как я уже упоминал, элемент button.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ваша проблема связана с неправильным использованием this. То, как вы его используете, будет ссылаться на объект, который вы передаете в команду ajax.
function AcceptOffer(id)
{
var json = {
id : id
};
var elemYouWantToChange =...;
$.ajax({
type: 'POST',
url: "@Url.Action("AcceptOffer", "Product")",
dataType : "json",
data: {"json": JSON.stringify(json)},
success: function() {
$(elemYouWantToChange).text("Accepted");
$(elemYouWantToChange).css("background-color", "green");
$(elemYouWantToChange).css("color", "white");
$(elemYouWantToChange).attr('disabled', true);
},
error: function(data) {
alert('Some error');
window.location.reload();
}
});
}
-- Редактировать --
В javascript вы слушаете щелчок следующим образом:
elem.addEventListener('click', function(e) {
console.info(e.target); // You need to get e.target to AcceptOffer so it can style the correct element
AcceptOffer(...);
});
да, но у меня много элементов с одним и тем же атрибутом класса, и все они меняются. Я просто хочу выбрать тот, на который я нажимаю.
Передайте событие AcceptOffer(id,e), а затем используйте e.target.
@ EL02 Я просто обновлял свой ответ, чтобы продемонстрировать, что говорит пользователь 1599011.
В вашем коде elemYouWantToChange должен = e.target.
В вашем коде this не указывает на тег привязки, вам просто нужно передать this ссылку на вашу функцию.
function AcceptOffer(ele, id)
{
var json = {
id : id
};
$.ajax({
type: 'POST',
url: "@Url.Action("AcceptOffer", "Product")",
dataType : "json",
data: {"json": JSON.stringify(json)},
success: function() {
$(ele).text("Accepted");
$(ele).css("background-color", "green");
$(ele).css("color", "white");
$(ele).attr('disabled', true);
},
error: function(data) {
alert('Some error');
window.location.reload();
}
});
}
Таким образом, тег привязки будет:
<a href = "javascript:void(0)" onclick = "AcceptOffer(this, '@item.OfferId')" class = "btn btn-default acceptbtn">Accept</a>
Или внутри функции просто установите ele на e.target, и тогда вам вообще не нужно будет передавать this.
Добавьте соответствующий HTML-код и код, устанавливающий обработчик события
clickдля кнопки. Кроме того,thisвнутри функцииsuccess, скорее всего, не ссылается наbutton. Вы пытались добавитьconsole.info(this);в обратный вызовsuccess, чтобы увидеть?