php - 如何在外部 jquery.js 文件中获取 PHP 迭代变量？

Question

我正在编写一个 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");
        }
    })
})

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

Answer 1

$(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() 部分...它不会执行任何操作，并且可能会在您的页面上引发错误...