jQuery отключить тег привязки и выбрать дочерний элемент?

Question

У меня большие проблемы с выяснением этого, поэтому, возможно, кто-то может мне помочь.

Это мой HTML:

<p>
post content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

<p>
post #2 content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

И мой JS:

$(".voteUp").click(function(){
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){
        $("a span").html(data);
    });
});

В основном я хочу изменить значение внутреннего диапазона на значение, которое содержит data.Приведенный выше код работает, но он изменяет содержимое каждого диапазона, а не только дочернего элемента привязанного по ссылке якоря.

Еще одна вещь, которую я хочу сделать, - отключить тег привязки после отправки голосования.

Есть идеи, как это сделать?

Answer 1

Попробуйте:

$(".voteUp").click(function(){
    var voteUp = $(this);
    if(voteUp.hasClass('disabled'){
        // don't do anything, because it's disabled
    } else{
        $.post(voteAction({postid: this.id, type: 'up'}), function(data){
            voteUp
                .addClass('disabled') // add a class, which you can check on a click event fired
                .find("span")
                .html(data);
        });
    }
});

Answer 2

Попробуйте:

$(".voteUp").click(function(){
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){
        // Replace <span> that's a child of this:
        $('span', this).html(data);
        // Unbind click event from anchor:
        $(this).unbind('click');
    });
});

Если вы хотите удалить тег привязки вместо отмены привязки события click, выполните:

$(this).parent().html($(this).html());

Answer 3

Имейте в виду, что ваша функция обратного вызова из $ .post является асинхронной, поэтому вы теряете свой контекст без надлежащего кадрирования.Итак, это означает, что ваш $('a span') просматривает весь DOM, и поэтому он заменяет все.

EDIT : Хорошо, Шеф раскалывает волосы, но заставил меня понять, что с помощью unbind (илиметод shef) по-прежнему не будет возвращать false при клике и, как таковой, будет иметь хороший эффект «к вершине» при нажатии на <a href="#">.Этот код был обновлен, чтобы исправить это.

$("a.voteUp").click(function(){
    //Set a local variable to the anchor that was clicked on for future use
    var $this = $(this);
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){
        $this.find("span").html(data);

        //Unbind this "voteUp" button.  This will remove the click handler and apply a class of "disabled"
        $this.unbind('click').click(function() { return false }).addClass('disabled');
    });
    return false;
});

Теперь в вашем CSS:

.disabled { color: #999; }

Это сделает текст в «отключенных» элементах серым.

Answer 4

Попробуйте

$(document).ready(function() {

    $(".voteUp").click(function() {

        $.post(voteAction({postid: this.id, type: 'up'}), function(data) {

            $(this).children("span").html(data);

        });

        $(this).unbind('click');
    });
});