Выберите только нажатую кнопку 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>

Добавьте соответствующий HTML-код и код, устанавливающий обработчик события click для кнопки. Кроме того, this внутри функции success, скорее всего, не ссылается на button. Вы пытались добавить console.log(this); в обратный вызов success, чтобы увидеть?

Scott Marcus 16.05.2022 19:45

@ScottMarcus Отредактировано

EL02 16.05.2022 19:47

Ну, во-первых, вы не должны использовать гиперссылку ни для чего, кроме навигации. Практически любой визуальный элемент поддерживает событие click, и вам, вероятно, следует просто использовать button, чтобы запустить какой-то код. Кроме того, вы не должны использовать встроенные атрибуты событий, такие как onclick, а вместо этого использовать современный стандарт .addEventListener().

Scott Marcus 16.05.2022 19:48

@ScottMarcus да ... console.log(this) просто печатает случайные вещи, у него нет ссылки на тег привязки

EL02 16.05.2022 19:50

Ну вот и все. Вы ссылаетесь не на тот элемент. Что он печатает? Кроме того, поскольку в настоящее время вы используете гиперссылку, знайте, что гиперссылки не имеют атрибута disabled.

Scott Marcus 16.05.2022 19:50

Вероятно, вам следует просто ссылаться на элемент напрямую, а не использовать this.

Scott Marcus 16.05.2022 19:51

@ScottMarcus есть идеи, как это сделать, если у меня есть более одного тега привязки с одним и тем же классом?

EL02 16.05.2022 19:53

Есть несколько способов... Вы можете найти его по его относительному положению с каким-либо другим элементом, вы можете найти его по id, вы можете найти его по числовому индексу всех подобных элементов, вы также можете просто дать ему дополнительный класс, которого нет у других элементов. Но опять же, вы не должны использовать якоря для этого в первую очередь.

Scott Marcus 16.05.2022 19:55

@ScottMarcus, чтобы я не использовал теги a в следующий раз, какой тег будет наиболее подходящим для этих случаев?

EL02 16.05.2022 20:03

Как я уже упоминал, элемент button.

Scott Marcus 16.05.2022 20:06
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
10
27
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.log(e.target); // You need to get e.target to AcceptOffer so it can style the correct element
  AcceptOffer(...);
});

да, но у меня много элементов с одним и тем же атрибутом класса, и все они меняются. Я просто хочу выбрать тот, на который я нажимаю.

EL02 16.05.2022 19:52

Передайте событие AcceptOffer(id,e), а затем используйте e.target.

user1599011 16.05.2022 19:55

@ EL02 Я просто обновлял свой ответ, чтобы продемонстрировать, что говорит пользователь 1599011.

ControlAltDel 16.05.2022 19:57

В вашем коде elemYouWantToChange должен = e.target.

Scott Marcus 16.05.2022 19:59

В вашем коде 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.

Scott Marcus 16.05.2022 20:01

Другие вопросы по теме