deal with a div within a while loop
I have a while开发者_运维技巧 loop shows data items from a database, I want to deal with each item apart, but what I get is just the first div, for each iteration, I wanna take the 'id' of current iteration and deal with it, it's look like 'like' in facebook, when I click on the first 'like' a jquery runs a $.post(..) function and all go fine: treatements done with this id,
but when I click on other next 'like's the post methode still sends the first id (checked out by firebug),
code:
<script type='text/javascript>
$("#like").click(function(){
$.post("done.php",
{id:$("#id").val()},
function(data){
...
});
});
</script>
<body>
$result = myqsl_query("select * from ...");
while($fetch = mysql_fetch_array($result){
..
echo "<input id='id' value='$fetch[0]'>
<a href='...' id='like'>like</a>";
..
</body>
I hope I succeeded to describe the problem! Any solution with any language will be appreciated! Regards.
If your final output looks something like this:
<input id='id' value='someValue'>
<a href='someLink' id='like'>like</a>
...
<input id='id' value='someValue'>
<a href='someLink' id='like'>like</a>
Will cause you a problem as an id needs to be unique per dom.
You could rework it to use classes:
<input class="likeId" value='someValue'>
<a href='someLink' class='like'>like</a>
...
<input class="likeId" value='someValue'>
<a href='someLink' class='like'>like</a>
And than in your click handler.
$(".like").click(function(){
$.post("done.php",
{id:$(this).prev('.likeId').val()},
function(data){
...
});
});
Depending if the input value is hidden you could remove it completely and use html data-* attributes and .data() assuming if you can use jQuery greater than 1.4.3.
<a href='someLink' class='like' data-likeId='someValue'>like</a>
<a href='someLink' class='like' data-likeId='someValue'>like</a>
$(".like").click(function(){
$.post("done.php",
{id:$(this).data('likeId')},
function(data){
...
});
});
ID's have to be unique in a HTML file. If you have multiple elements with the same ID, the browsers only return the first one. Thus, $('#like').click() only attaches the click event handler to the first element with this ID.
You have to use classes instead:
<script type='text/javascript>
$(".like").click(function(){
$.post("done.php",
{id:$(this).prev().val()},
function(data){
...
});
});
</script>
<body>
<?php
$result = myqsl_query("select * from ...");
?>
<?php while(($fetch = mysql_fetch_array($result))): ?>
<input class="something" value="<?php echo $fetch[0]; ?>" />
<a href="..." class="like">like</a>
<?php endwhile; ?>
</body>
Further notes:
- You should not
echoHTML, it makes it hard to maintain. Instead, embed PHP in HTML, like I showed above. - I also use the alternative syntax for control structures, which is easier to read if you mix HTML and PHP.
Maybe you could do something like this:
<script type='text/javascript>
$(".like").click(function(){
$.post("done.php",
{id:$("#id").prev("input").val())},
function(data){
...
});
});
</script>
<body>
$result = myqsl_query("select * from ...");
while($fetch = mysql_fetch_array($result){
..
echo "<input name='id' value='$fetch[0]'>
<a href='...' class='like'>like</a>";
..
</body>
You say "first like" so I am assuming that you have many 'like' buttons in the page.
$("#like").click(function(){
but standards would tell you that id's are to be unique. Maybe a global variable that iterates and appends the iteration to the id such as '#like1', '#like2' etc.
Not sure if this will lead you to your answer but it is something that needs consideration.
加载中,请稍侯......
精彩评论