如何在外部jquery.js文件中获取PHP迭代变量 - How to get a PHP iteration variable in an external jquery.js file?

How to get a PHP iteration variable in an external jquery.js file?

我正在编写一个显示用户待办事项列表的PHP程序。我所拥有的基本上是一个无序列表，它有一个复选框，当选中该复选框时，用户可以将列表项标记为已完成（即给文本一个删除线）。这是列表的代码

echo '<ul>';
for ($i=0; $i<6; $i++){
       $text = "This is item number " . $i;
       $complete = 'No';
       $order = 'This item is to be done #' . $i;
       echo '<li id = '. $i . '>';
    echo 'Item complete? <input type="checkbox" id="checkbox" />';
    echo '<span id = ' . $i . ' onLoad="crossOut()">Item: ' . $text . ' Complete? ' .$complete . '&nbsp&nbspWhen to do Item: ' . $order . '</span>';
    echo '</li>';
       }
echo '</ul>';

}

这是我使用的jquery函数

$(document).ready(function crossOut(){
    $("#checkbox").change(function crossOutText(){
        if($(this).is(":checked")){
            $("#liID").css("text-decoration", "line-through");
        }
    })
})

我想弄清楚的是，如何将列表ID从PHP传递到外部JS文件中的jquery函数，这样每当用户检查一个项目时，它就会标记该列表项目已完成，并在该列表项目的文本上加上删除线。我是使用jquery的新手，任何人愿意提供的帮助都将不胜感激。

$(document).ready(function(){
    $("input:checkbox").change(function(){
        if($(this).is(":checked")){
            $(this).parents("li").css("text-decoration", "line-through");
            // ^^^^^^^^^^^^^^ strike through the parent list item.
        }
    })
})

以下是使用CSS类的更好方法：

$(document).ready(function(){
    $("input:checkbox").change(function(){
        $(this).parents("li").toggleClass('strike', this.checked)
        // ^^^^^^^^^^^^^^ strike through the parent list item.
    })
})

CSS：

.strike {
    text-decoration: line-through;
}

演示：http://jsfiddle.net/maniator/unmLd/

免责声明：
_{我在两个示例中都将#checkbox更改为input:checkbox，因为不能有多个具有相同ID的元素！请尝试使用类。}

此外，删除代码中的crossout()部分。。。它不会做任何事情，可能会在您的页面上引发错误。。。

类似的东西？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]').change(function(){
        if($(this).is(":checked")){
            $(this).parent().css("text-decoration", "line-through");
        }else{
            $(this).parent().css("text-decoration", "none");
        }
    });
});
</script>
<title>Untitled Document</title>
</head>
<body>
<?php
    echo '<ul>';
    for ($i=0; $i<6; $i++){
        $text = "This is item number " . $i;
        $complete = 'No';
        $order = 'This item is to be done #' . $i;
        echo '<li id = '. $i . '>';
        echo 'Item complete? <input type="checkbox" id="checkbox" />';
        echo '<span id = ' . $i . '>Item: ' . $text . ' Complete? ' .$complete . '&nbsp&nbspWhen to do Item: ' . $order . '</span>';
        echo '</li>';
    }
    echo '</ul>';
?>
</body>
</html>