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

我尝试了在这里和其他地方找到的东西，但似乎卡住了。这里就是我想要做的：点击链接应该通过jQuery更改标题属性ajax.get调用

拨动它的父元素类
通过GET发送一个Ajax请求与链接的id和标题和标题更改为响应

我想到了＃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>

我想，而不是$.title = data;直接使用$(this).attr('title', data);但不工作 - 我的猜测是，$(this)在脚本中的那个阶段是不<a>标签，但我不知道足够的jQuery来了解如何以不同方式“挑选”正确的<a>标记。无论如何，奇怪的是，它是这样工作的 - 但只是每隔一段时间！所以点击改变类，但没有标题，接下来点击再次，现在还标题更改类...

我然后通过其ID调用<a>元素尝试过了，我硬编码它 - 那么它每次都有效：$('#1').attr('title', data);，但当然我需要使用正确的ID取决于哪个链接被点击 - 但我不知道如何在这里得到它。

这里是被称为

<?php 
if (substr($_GET['title'], -2)=="on") { 
$result = "off"; 
} 
else { 
$result = "on"; 
} 
print "this is ".$result; 
?>

我的猜测文件的test1.php代码是我不完全了解的jQuery和我只是失去了一些东西很简单/基本在这里。预先感谢您的期待。 j）。

j。

来源

2011-01-23 drjibe

问题是$ .get是异步的。所以$（this）.attr（'title'，$ .title）;在ajax请求之后执行。但在回应之前。

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

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

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

来源

2011-01-23 13:19:28 Andy

你必须把这个：

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

的成功回调，而你的情况是

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

内另外，你正在给全局jQuery对象分配标题，这似乎是一个坏主意。如果你想将其存储在一个变量，使用局部变量：的

var title = data;

代替：

$.title = data;

但在任何情况下，你应该在这种情况下，能值直接在分配回调，正如您之前尝试过的，不成功（因为您在调用范围之外调用data参数）。

您注意到this不再在回调运行时设置为jquery对象。为了解决这个问题，明确设置一个变量回调外，然后参照它里面

因此，把它正确的范围内的代码，并明确价值分配这一点，应该是这个样子：

var $this = $(this); 
$.get({ 
    ... 
    function(data) { 
    $this.attr('title', data); 
    $this.closest('li').toggleClass('highlight'); 
    }, 
    ... 
});

您在这里的问题是，）匿名“回调”功能到$获得（在流过data参数，没有得到执行，直到Ajax调用后完成。因此，您的函数声明中的一小段代码

function(data) { ... }

不会按写入顺序运行。这就是为什么AJAX中的第一个'A'代表'异步'。代码后功能将得到与其他代码同时运行，这就是为什么你的突出显示始终工作。

原因标题属性只换一次其他时间，是你的成功回调的data的值赋给一个全局访问对象的$对象。这意味着你可以在你赋值的函数范围之外访问该值（在本例中是回调函数）。但是，您只能在设置后才能访问它！由于在AJAX响应从服务器返回之后才设置，因此在操作完成之前，$ .title将会是'undefined'。我的猜测是AJAX呼叫在第一次和第二次点击之间完成。

来源

2011-01-23 15:07:40 alegscogs

请注意，安迪建议下面基本上相同的东西，用更少的话。他将改变title属性的代码移动到回调函数中。无论您是希望将重点业务留在同步代码还是将其移入成功回调，都取决于您希望执行的时间。 – alegscogs 2011-01-23 15:30:54

谢谢，但这并不奏效。我曾尝试过所有这些。我试图直接在回调中赋值，但它不起作用。把toggleClass导致它不能工作了。我的猜测是，它与$(this)在回调中不再正确无关。如果我通过它的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).closest('li').toggleClass('highlight');的回调函数内的萤火虫产生g.nodeName is undefined错误。

所以也许可以采取不同的方式：最好的方法是什么才能使元素的ID可用？我猜这是一些基本的jQuery方法...经过一段时间摆弄它后，我来到了这个工程 - YAY

$(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; 
    }); 
});

尽管如此 - 非常感谢您的想法。他们带领我走向正确的方向。可能有更好或更优雅的方式来做到这一点。如果是这样，我会非常感兴趣！

来源

2011-01-23 16:10:19 drjibe

抱歉忽略$（this）问题。检查我上面修改的答案：您可以将$（this）的值存储在一个变量（通常名为$ this）中，然后在您的回调函数中调用它。恭喜找到解决方法，并祝你的项目好运。 – alegscogs 2011-01-23 22:57:55

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

回答

相关问题