How to get a PHP iteration variable in an external jquery.js file?
Question
I'm writing a PHP program that displays a user's to do list. What I have is basically an unordered list that has a checkbox that, when checked, will allow the user to mark a list item as done (ie give the text a strikethrough). Here's the code I have for the list
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 . '  When to do Item: ' . $order . '</span>';
echo '</li>';
}
echo '</ul>';
}
And here's the jquery function I'm using
$(document).ready(function crossOut(){
$("#checkbox").change(function crossOutText(){
if($(this).is(":checked")){
$("#liID").css("text-decoration", "line-through");
}
})
})
What I'm trying to figure out is how to pass the list ID from the PHP to the jquery function, in an external JS file, so that whenever a user checks an item it marks that list item done and puts a strikethrough on the text of that list item. I'm new to using jquery and any help that anyone is willing to give would be greatly appreciated.
2 answers
solution1
3 ACCPTED 2013-02-08 13:34:50
$(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.
}
})
})
Here is a better way using a CSS class:
$(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;
}
Demo: http://jsfiddle.net/maniator/unmLd/
Disclamer:
I changed #checkbox to input:checkbox in both example because you cannot have multiple elements with the same ID! Try using a class instead.
Also, remove the crossout() part of your code... It does not do anything and might throw an error on your page...
solution2
0 2013-02-08 13:48:49
Something like this?
<!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 . '  When to do Item: ' . $order . '</span>';
echo '</li>';
}
echo '</ul>';
?>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.