Question

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

切换其父元素类
通过GET发送带有链接ID和标题的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>

我试过而不是$.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;
?>

我的猜测是我并不完全理解jQuery，而我在这里只是遗漏了一些非常简单/基本的东西。提前感谢您的光临。

学家

Answer 1

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

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

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

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

Answer 2

你必须把这个：

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

你遇到的问题是$ .get（）传递data参数的匿名'回调'函数，直到之后 ajax调用才会执行完成了。所以函数声明中的一小段代码

function(data) { ... }

不会按照写入的顺序运行。这就是为什么AJAX中的第一个'A'代表'异步'。之后的代码将与其他代码同时运行，这就是为什么你的亮点始终有效。

title属性仅在每个其他时间内更改的原因是，您的成功回调是将data的值分配给全局可访问的对象$对象。这意味着您可以在分配它的函数范围之外访问该值（在本例中为回调）。但是，您只能在设置后才能访问它！由于直到AJAX响应从服务器返回后才设置，因此$ .title将被“未定义”，直到该操作完成。我的猜测是在第一次和第二次点击之间完成了AJAX调用。

Answer 3

谢谢，但这不起作用。我曾经尝试过这一切。我试图直接在回调中分配值，但它不起作用。将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');置于回调函数中会在Firebug中产生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;
    });
 });

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

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

3 个答案: