Обновление ссылки при нажатии другой ссылки с помощью jquery

Question

Я новичок в JQuery. Когда я нажимаю первую ссылку, он отправляет запрос Ajax на сервер и возвращается с некоторыми данными. До сих пор все хорошо. В обратном вызове я хочу изменить текст diplay второй ссылки. например, 6 людям понравилось. Я много искал, но не мог заставить его работать.

<div class="container" id="some-id"> 
    <a class="someclass-1">Like</a> 
    <a class="someClass-2">5 people liked it</a> 
</div> 

Я попытался что-то изменить, чтобы изменить текст второй ссылки. Но я не могу изменить текст. Мой вопрос в том, как я выбираю и изменяю текст второй ссылки.

$(this).closest('div').find('.someClass-2').html('6 people liked it'); 

Мой Ajax код что-то вроде:

$(".someClass-1").click(function(e) { 
     if ($(this).html() == "Like") { 
      var parameters = { statusId: $(this).closest('div').attr('some-id')}; 
      $.get(
       "/like", 
       parameters, 
       function(data) { 
       $(this).closest('div').find('.someClass-2').html(data + ' people liked it.'); 
       } 
     ); 
     } 

У меня есть много больше ссылок класса someClass-2 на странице, но я не хочу им мешать. Я просто хочу изменить текст ссылки someClass-2 в текущем div.

Answer 1

Почему вы используете $(this)? Если у вас есть уникальный идентификатор, используйте его.

$(".someClass-2").text("6 people liked it"); 

И, конечно, положить, что в Ajax success функции.

EDIT:

var dataNumber; 

$(".someClass-1").click(function(e) { 
    myElement = $(this); 
     if ($(this).html() == "Like") { 
      var parameters = { statusId: $(this).closest('div').attr('some-id')}; 
      $.get(
       "/like", 
       parameters, 
       function(data) { 
       myElement.siblings('.someClass-2').html(data + ' people liked it.'); 
       } 
     ); 
     } 

Использование .siblings() для выбора всех братьев и сестер, чем фильтровать его по классу или .next(), если вам нужно выбрать только следующий родственный.

Кроме того, будьте осторожны, когда вы помещаете переключатель ... Вы поместили его в вызов Ajax, а не в click(), и из-за этого он изменил его значение.

Answer 2

Изменить этот

$(this).closest('div').find('.someClass-2').html('6 people liked it');` 

к этому

$(this).parent().children("a.someClass-2").text("new text"); 

Answer 3

Может что-то вроде этого?

$('.someClass-2').html('6 people liked it'); 

... но мне непонятно, где разместить эту строку в коде.

Answer 4

Использование next()

$(this).next('.someClass-2').html('6 people liked it'); 

с AJAX создать переменную с текущим элементом:

$(".someClass-1").click(function(e) { 
     var el = $(this);///see here 
     if ($(this).html() == "Like") { 
      var parameters = { statusId: $(this).closest('div').attr('some-id')}; 
      $.get(
       "/like", 
       parameters, 
       function(data) { 
       el.next('.someClass-2').html(data + ' people liked it.');//if you use $(this) i will refer to the ajax object 
       } 
     ); 
     } 

или:

$(".someClass-1").click(function(e) { 
      var el = $(this);///see here 
      if ($(this).html() == "Like") { 
       var parameters = { statusId: $(this).closest('div').attr('some-id')}; 
       $.get(
        "/like", 
        parameters, 
        function(data) { 
        el.parent().find('.someClass-2').html(data + ' people liked it.');//if you use $(this) i will refer to the ajax object 
        } 
      ); 
      } 

Answer 5

Я думаю, что это поможет вам

$('#some-id .someClass-2').text('6 people liked it'); 

он заменит html всех someclass-2 в # some-id.