通过jQuery ajax.get调用更改标题属性_Ajax_Jquery

通过jQuery ajax.get调用更改标题属性

ajax jquery

通过jQuery ajax.get调用更改标题属性,ajax,jquery,Ajax,Jquery,我试过在这里和其他地方找到的东西，但似乎卡住了。我想做的是：点击链接应该切换其父元素类使用链接的id和标题通过GET发送ajax请求，并将标题更改为响应我找到了#1，并且能够在#2中发送ajax请求（并执行调用文件应该执行的任何操作，其响应也很好），但我正在努力将响应“附加”到标题这是我的HTML代码 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/aj

我试过在这里和其他地方找到的东西，但似乎卡住了。我想做的是：点击链接应该

切换其父元素类

使用链接的id和标题通过GET发送ajax请求，并将标题更改为响应

我找到了#1，并且能够在#2中发送ajax请求（并执行调用文件应该执行的任何操作，其响应也很好），但我正在努力将响应“附加”到标题

这是我的HTML代码

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>          
<script type="text/javascript">                                         
 $(document).ready(function() {
  $('li div.toggle a').click(function() {
   $.get(
    "test1.php",
    { id: $(this).attr('id'), title: $(this).attr('title') },
    function(data) {
     $.title = data;
    },
    "text");
   $(this).attr('title', $.title);
   $(this).closest('li').toggleClass('highlight');
  });
 });
</script>  
<style type="text/css" media="screen">
 .highlight {
 background: red;
}
</style>
</head>
<body>
<ul>
<li>
 <div>1</div>
 <div class="toggle"><a href="#" id="1" title="this is off">Toggle</a></div>
</li>
<li class="highlight">
 <div>2</div>
 <div class="toggle"><a href="#" id="2" title="this is on">Toggle</a></div>
</li>
</ul>
</body>
</html>

我的猜测是，我不完全理解jQuery，只是缺少一些非常简单/基本的东西。提前感谢您的关注

j、问题在于$.get是异步的。因此，$（this.attr（'title'，$.title）；在ajax请求之后立即执行。但在回应之前

尝试在回调函数中设置标题：

   $.get(
    "test1.php",
    { id: $(this).attr('id'), title: $(this).attr('title') },
    function(data) {

        $(this).attr('title', data);
    },
    "text");

你必须这样说：

$(this).attr('title', $.title);
$(this).closest('li').toggleClass('highlight');

在成功回调中，在您的示例中是

function(data) {
 $.title = data;
},

另外，您正在为全局jQuery对象分配标题，这似乎是个坏主意。如果要将其存储在变量中，请使用局部变量：

var title = data;

而不是：

$.title = data;

但是在任何情况下，在本例中，您都应该能够直接在回调中赋值，就像您以前尝试的那样，但没有成功（因为您调用的

数据参数超出了它的范围）
您注意到，在运行回调时，这个
不再设置为jquery对象。要解决此问题，请在回调外部显式设置一个变量，然后在内部引用它
因此，将代码放在正确的范围内，并将其指定给显式值，它应该如下所示：
var $this = $(this);
$.get({
  ...
  function(data) {
    $this.attr('title', data);
    $this.closest('li').toggleClass('highlight');
  },
  ...
});

这里的问题是，$.get（）向其传递数据
参数的匿名“回调”函数在ajax调用完成后才会执行。因此，函数声明中的一点点代码
function(data) { ... }

不会按照写入的顺序运行。这就是为什么AJAX中的第一个“A”代表“异步”。该函数之后的代码将与其他代码同时运行，这就是突出显示始终有效的原因
title属性仅每隔一次更改一次的原因是，成功回调将数据的值
分配给全局可访问的对象$
对象。这意味着您可以在分配该值的函数范围之外访问该值（在本例中为回调）。但是，您只能在设置后访问它！由于直到AJAX响应从服务器返回后才设置，$.title将在该操作完成之前处于“未定义”状态。我猜AJAX调用是在第一次和第二次单击之间完成的。
谢谢，但这不起作用。这一切我都试过了。我试图在回调中直接赋值，但不起作用。将toggleClass
放置在一起也会导致它不再工作。我猜想这与回调中的$（这个）
不再正确有关。如果我通过元素的id将其直接分配给元素，那么它确实可以工作$（'#1'）.attr（'title'，data）
但显然，如果要单击多个链接，这是行不通的
让我试着解释一下。这不起作用：
$.get(
    "test1.php",
    { id: $(this).attr('id'), title: $(this).attr('title') },
    function(data) {
     $(this).attr('title', data);
    },

这确实有效：
$.get(
    "test1.php",
    { id: $(this).attr('id'), title: $(this).attr('title') },
    function(data) {
     $('#1').attr('title', data);
    },

顺便说一句：把$（this.nexist（'li'）。toggleClass（'highlight'）生成一个g.Firebug中的nodeName未定义
错误
因此，也许我们可以换一种方式来处理它：最好的方法是什么才能使元素的id可用？我猜这是一些基本的jQuery方式。。。在摆弄了一段时间后，我终于找到了这个可行的方法——耶
$(document).ready(function() {
    $('li div.toggle a').click(function() {
        var elementId = '#'+$(this).attr('id');
        $.get(
            "test1.php",
            { id: $(this).attr('id'), title: $(this).attr('title') },
            function(data) {
                $(elementId).attr('title', data);
            },
            "text");
        $(this).closest('li').toggleClass('highlight');
        return false;
    });
 });

不过，非常感谢你的想法。他们把我引向正确的方向。也许有一种更好或者更优雅的方法可以做到这一点。如果是这样，我会非常感兴趣的 请注意，Andy在下面用更少的词提出了基本相同的建议。他将更改title属性的代码移动到回调函数中。您是想在同步代码中保留突出显示业务，还是将其移动到成功回调中，取决于您希望它何时执行。很抱歉，忽略了$（this）问题。检查我上面修改的答案：您可以将$（this）的值存储在一个变量（通常命名为$this）中，然后在回调函数中调用它。恭喜你找到了解决办法，祝你的项目好运。
$(document).ready(function() {
    $('li div.toggle a').click(function() {
        var elementId = '#'+$(this).attr('id');
        $.get(
            "test1.php",
            { id: $(this).attr('id'), title: $(this).attr('title') },
            function(data) {
                $(elementId).attr('title', data);
            },
            "text");
        $(this).closest('li').toggleClass('highlight');
        return false;
    });
 });