Question

我学习jQuery和我有这样的代码：

echo "<table border=1>     
    <tr><th class='col1'>Mã Sinh Viên <a href='javascript:void(0)' data-page='$page' data-field='stuId' data-sort='$sort' data-key='$key'><img src='downArrow.gif'></a></th> 
     <th class='col2'>Họ tên <a href='javascript:void(0)' data-page='$page' data-field='stuName' data-sort='$sort' data-key='$key'><img src='downArrow.gif'></a></th> 
     <th class='col3'>Ngày sinh <a href='javascript:void(0)' data-page='$page' data-field='stuDoB' data-sort='$sort' data-key='$key'><img src='downArrow.gif'></a></th> 
     <th class='col4'>Giới tính <a href='javascript:void(0)' data-page='$page' data-field='stuSex' data-sort='$sort' data-key='$key'><img src='downArrow.gif'></a></th> 
     <th class='col5'>Địa chỉ <a href='javascript:void(0)' data-page='$page' data-field='stuAdd' data-sort='$sort' data-key='$key'><img src='downArrow.gif'></a></th> 
    </tr> 
"; 

和一些脚本：

$("#mainTable th a").click(function() { 
    var clicked= $(this); 
    var page= clicked.data("page"); 
    var field= clicked.data("field"); 
    var sort= clicked.data("sort"); 
    var key= clicked.data("key"); 
    if(sort== 'up') { 
     sort= 'down'; 
     clicked.html("<img src='downArrow.gif'>"); 
     clicked.attr("data-sort",sort); 
    } 
    else { 
     sort= 'up'; 
     clicked.html("<img src='upArrow.gif'>"); 
    } 
    showPage(page,field,sort,key); 
}); 

我需要的是当点击图像上，它会改变图片。我用.click事件和$(this)选择器来处理被点击的元素。但是当我点击图片时它仍然是一样的。

我的代码有什么问题？我试过CTRL-ALT-j但没有错误。请帮助我。

Answer 1

你的桌子没有课。

在JavaScript代码选择与类mainTable表，但表不存在...

Answer 2

的jQuery尝试选择锚数据：

$("#mainTable th a").click(function() { 
    var clicked= $(this); 
    var page= clicked.attr("data-page"); 
    var field= clicked.attr("data-field"); 
    var sort= clicked.attr("data-sort"); 
    var key= clicked.attr("data-key"); 
    if(sort== 'up') { 
     sort= 'down'; 
     clicked.html("<img src='downArrow.gif'/>"); 
     clicked.attr("data-sort",sort); 
    } 
    else { 
     sort= 'up'; 
     clicked.html("<img src='upArrow.gif'/>"); 
    } 
    showPage(page,field,sort,key); 
}); 

Answer 3

尝试用clicked.data("sort",sort);设置data-sort属性

$("#mainTable th a").click(function() { 
    var clicked = $(this); 
    var page = clicked.data("page"); 
    var field = clicked.data("field"); 
    var sort = clicked.data("sort"); 
    var key = clicked.data("key"); 

    if (sort == 'up') { 
     sort = 'down'; 
     clicked.html("<img src='downArrow.gif'>"); 
    } else { 
     sort = 'up'; 
     clicked.html("<img src='upArrow.gif'>");  
    } 
    clicked.data("sort",sort); 
}); 

Working Sample