Jquery - не может нацелиться на нужный элемент с помощью $(this)

Question

Возможный дубликат:
$ (это) не работает в функции

У меня проблема с таргетингом на нужный элемент в моем коде. У меня есть список миниатюр на моей странице, и когда вы нажимаете значок "Мне не нравится", целевое видео меняется на другой.

Вот HTML

<li class="videoBox recommended">
   <div class="spacer" style="display: block;"></div>
   <div class="features">
       <div>
          <a class="dislike_black" title="I dislike this" onclick="ThumbsDown(30835, 'relevance', '1');"></a>
       </div>
   </div>
   <a href="...">
   <h1>...</h1>
   <div class="information">...</div>
</li>

Аякс это:

function ThumbsDown(id,sort,page) {
$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST",
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(data) {
        //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
        $(this).parent("li.videoBox").html(data); // Cant get this to work!
    }
});

Что я делаю не так? даже $(this).css("border","1px solid red") не "работает". (Я пробовал с цветом фона и цветом тоже) ничего не вижу.

$ (This) относится к тегу "a", где функция вызывается правильно? Поэтому я ищу его родителя по имени videobox... Помогите?

Так могу ли я нацелиться

Answer 1

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

Измени свой <a> теги к этому:

<a href="/change/videos/1/thumbsdown/"
    data-sort="sort"
    data-page="page"
    class="dislike_black"
    title="I dislike this"></a>

Событие jQuery:

$('.dislike_black').click(function(e) {
    e.preventDefault(); // Prevent link from clicking

    var $aTag = $(this); // I use $aTag to denote a jq object

    $.ajax({
        url: $aTag.attr('href'),
        type: "POST",
        data: {
            "sort": $aTag.data('sort'), // data-sort attr value
            "page": $aTag.data('page') // data-page attr value
        },
        success: function(response) {
            $aTag.closest(".videoBox").html(response);
        }
    });
});

Теперь это работает без javascript, и вы не используете противный клик! Не проверено / нет гарантии.

Answer 2

Почти. Для того, чтобы сделать эту работу, вам нужно пройти в context к .ajax() вызов.

подобно

$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST", 
    context: document.body, // for instance
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(data) {
        //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
        $(this).parent("li.videoBox").html(data); // Cant get this to work!
    }
});

Приведенный выше код приведет к тому, что все обработчики ajax будут иметь this указывая на document.body, Таким образом, вам нужно будет заменить document.body с элементом, который вы ищете. Так что, если вы, например, вызываете свою функцию в какой-то click handler ты можешь просто позвонить context: this и волшебство сделано.

Посмотрите jQuery Ajax Doc раздел "context" для более подробной информации.

Answer 3

Я считаю, что все, что вам нужно было изменить в исходном коде, - это получить ссылку на this вне функции успеха, вот так:

function ThumbsDown(id,sort,page) {
    var self = this
    $.ajax({
        url: "/change/videos/"+id+"/thumbsdown/",
        type: "POST",
        data: {
            "sort": sort?sort:"",
            "page": page?page:""
        },
        success: function(data) {
            //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
            $(self).parent("li.videoBox").html(data); // Cant get this to work!
        }
    });