使用 jquery 在单击另一个链接时更新链接

Question

我是 JQuery 的新手。当我单击第一个链接时，它会向服务器发送一个 Ajax 请求并返回一些数据。到目前为止一切都很好。在回调中，我想更改第二个链接的显示文本。例如 - 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 类的链接，但我不想打扰它们。我只想更改当前div中someClass-2链接的文字。

Answer 1

使用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 2

您为什么使用$(this)？如果您有唯一标识符，请使用它。

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

当然，把它放在 Ajax success 函数中。

编辑：

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()。

另外，注意this 选择器的放置位置...您已将其放在 Ajax 调用中，而不是 click() 函数中，因此它改变了它的值。

Answer 3

我想这会对你有所帮助

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

它将替换#some-id中所有someclass-2的html。

Answer 4

改变这个

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

到这里

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

Answer 5

也许是这样的？

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

...但我不清楚在你的代码中将该行放在哪里。