I'm trying to make simple cms; the code below is index.php.
Now I can't find the way to make jquery select each item, because they have the same name.
For example i want to do is: select (on $(.subject)).hover then (a $(.subjectpic)).show
How to make them have their own names?
<?php
if(!$query){
print "submit error";
}
else {
while($list=mysql_fetch_array($query)){
print"
<div class=\"subjectwrap\">
<div class=\"subject\">$list[subject]</div>
<div class=\"subjectpic\">$list[subjectpic]</div>
</div>
";
}
}
?>
There are two options. You can either do it all with jQuery, selecting the sibling subjectpic:
$('.subject').hover( function() {
$(this).closest('.subjectwrap').find('.subjectpic').show();
});
Or you can do it with PHP, assigning each a numerical data-subject index:
<?php
if(!$query){
print "submit error";
}
else {
$i = 1;
while($list=mysql_fetch_array($query)){
print"
<div class=\"subjectwrap\">
<div class=\"subject\" data-subject=\"$i\">$list[subject]</div>
<div class=\"subjectpic\" data-subject=\"$i\">$list[subjectpic]</div>
</div>
";
$i++;
}
}
?>
By assigning a numerical index in PHP, you could then target it with jQuery:
$('.subject').hover( function() {
var thisSubject = $(this).attr('data-subject');
$('.subjectpic[data-subject=' + thisSubject + ']').show();
});