Question

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>
        ";
    }
}   
?>

Answer 1

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();
});