如何在外部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");
        }
    })
})

我要弄清楚的是如何將列表ID從PHP傳遞到外部JS文件中的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()部分...它什么也不做，可能會在頁面上引發錯誤...

Answer 2

像這樣嗎

<!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>

如何在外部jquery.js文件中獲取PHP迭代變量？

問題描述

2 個解決方案

解決方案1
3 已采納 2013-02-08 13:34:50

解決方案2
0 2013-02-08 13:48:49

如何在外部jquery.js文件中獲取PHP迭代變量？

問題描述

2 個解決方案

解決方案1 3 已采納 2013-02-08 13:34:50

解決方案2 0 2013-02-08 13:48:49

解決方案1
3 已采納 2013-02-08 13:34:50

解決方案2
0 2013-02-08 13:48:49