用户点击链接,这是一个空复选框的图像。这是我的HTML:
<a href="" class="completeTask" id="<?php echo $task->id ?>" name="taskStatus">
<img src="<?php echo ( $task->complete == 1 ) ? "/images/task-checkbox-filled.png" : "/images/task-checkbox-empty.png" ?>" class="task-checkbox" />
</a>
.js脚本被调用:
$( function() {
$( ".completeTask" ).click( function() {
var taskID = $( this ).attr( "id" );
var name = $( this ).attr( "name" );
var data = "taskID=" + taskID;
var parent = $( this );
var image = $( ".task-checkbox" );
if ( name == "completeTask" ) {
$.ajax( {
type: "POST",
url: "/scripts/completeTask.php",
data: data,
cache: false,
success: function( imageSource ) {
image.attr( 'src', imageSource );
}
} );
}
return false;
} );
} );
completeTsk.php返回的结果是图像路径和文件名:
//Return image path and filename
if ( $task->complete == 1 )
echo "/images/task-checkbox-filled.png";
else
echo "/images/task-checkbox-empty.png";
exit;
我的预期结果是加载了一个填充复选框的新图像,但是当用户点击原始的空复选框时,图像就会消失。