JQUERY: Доступ к элементу двоюродного брата по классу

Question

Привет, у меня есть следующий HTML-код:

<li class="grey">
    <div class="row">
       <button id="test" style="width:50%;" class="btn btn-blue-white cartBtn">Add to Cart</button>
    </div>
    <div class="row">
       <a href="#" class="checkoutLink" style="margin-top:-10px;font-size:small">Go To Checkout</a>
    </div>
</li>

Когда я загружаю страницу, я скрываю кнопку ссылки оформления заказа, пока пользователь не нажмет «добавить в корзину». После того, как они нажимают добавить в корзину, мой javascript выглядит так:

 $('.cartBtn').click(function () {
           //do stuff for preprocessing
            var url = "../Store/AddToCart";
            $.ajax({
                type: "GET",
                url: url,
                data: {
                    //add data
                },
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {
                       $(this).closest('li').find('.checkoutLink').show();
                    }
                }
            });
        });

ссылка никогда не показывается обратно. Я также пытался использовать

$(this).parent().parent().find('.checkoutLink').show() 

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

Answer 1

Проблема в this, когда вызывается из функции успеха, она больше не относится к внешнему this. Создайте переменную вне Ajax, которая ссылается на оригинал this.

    $('.cartBtn').click(function () {
              var $this = $(this);
               //do stuff for preprocessing
                var url = "../Store/AddToCart";
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {
                        //add data
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.success == true) {
                           $this.closest('li').find('.checkoutLink').show();
                        }
                    }
                });
            });