Replace one div with another div using dynamically created content

Question

So what I have is a php script that queries a database, and creates a number of elements which display both a red team abbreviation, and a blue team abbreviation (much like the schedule strip on the top of nfl.com). I am trying to acoomplish the following:

On mouse hover of a game element (class=game), swap out the div layer with one that contains the date and time of the match.

What I am having trouble with is somehow relating the two items together within jQuery. I can get jQuery to know what item it needs to hide, but not what item it needs to replace it with.

$db = get_database_connection();

$today = date("Y-m-d");

$sql='
SELECT game_date as date,
        game_time as time,
                stred.team_name AS redteam,
                stblue.team_name AS blueteam,
                stred.team_abbreviation as redteamabbrev,
                stblue.team_abbreviation as blueteamabbrev
FROM stats_tblGames
INNER JOIN stats_tblTeams AS stred ON stats_tblGames.fk_id_team_red = stred.id_team
INNER JOIN stats_tblTeams AS stblue ON stats_tblGames.fk_id_team_blue = stblue.id_team
ORDER BY date ASC
LIMIT 5
';

echo '<div class="switch">';

foreach ($db->query($sql) as $row) {

$date = $row['date'];

if($today > $date) {

    $time = date('g:i A T',($row['time']));
    $redteam = $row['redteamabbrev'];
    $blueteam = $row['blueteamabbrev'];

    $control = $date . $redteam;
    $control2 = $redteam . $date;

    # Convert date
    $format = date_format(new DateTime($date), 'D, M j');    

    echo "<div id='$control' class='game'>";

        echo '<strong class="red-team">' . $redteam . '</strong><br>';
        echo '<strong class="blue-team">' . $blueteam . '</strong>';

    echo '</div>';

    echo "<div id='$control2' class='game hide'>";

        echo '<strong>' . $format . '</strong><br>';
        echo '<strong>' . $time . '</strong>';

    echo '</div>';

    # Script to hide/show games on hover
}
}

echo '</div>';

echo '<p class="clearfix"></p>';

?>

<script type="text/javascript">

jQuery('.game').mouseover(function() {
    jQuery(this.id).hide();
    jQuery(this.id).closest(SHOWID).show();            
});

</script>

@MackieeE The .game element clearly exists already. All that putting that code into a document.ready handler would do is make the mouseover start working a little later than it should. — Paul
– Paul, Commented Jan 1, 2015 at 17:56
You guys are missing the point. The point is that I'm trying to relate the two divs somehow so that I am able to use jQuery to hide/show them. Currently I cannot figure out a way to get the ID of the hidden div so that jQuery can use it — pingu
– pingu, Commented Jan 1, 2015 at 18:00

snout1979 · Accepted Answer · 2015-01-01 19:16:48Z

1

How about making the two divs children of the game class?

<div class='game'>
    <div id='$control'></div>
    <div id='$control2' class='hide'></div>
</div>

which should allow you to use something like

jQuery('.game').mouseenter(function() {
    $(this).children().toggle();    
});

jQuery('.game').mouseleave(function() {
    $(this).children().toggle();    
});

(which would also work without the $control/$control2 id's)

See http://jsfiddle.net/y3wLsz35/2/ for a working example

edited Jan 1, 2015 at 19:16

answered Jan 1, 2015 at 17:45

snout1979

5942 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

pingu Over a year ago

That's not what I am having trouble with though (unless I am greatly misunderstanding your post). I am having trouble getting the id of the hidden div so that I am able to show it when the shown div is hovered upon. $control1 and $control2 dynamically change by the way, they are all differnet IDs

snout1979 Over a year ago

ah, I see what you mean now... then I would suggest a slightly different approach... updating my answer...

pingu Over a year ago

I see what you did, but because $control and $control2 are variables created through the combination of data and team abbreviation (each game element has a differnet id) it won't work

snout1979 Over a year ago

By using .children() the id's become irrelevant. Check jsfiddle.net/y3wLsz35/2 using mouseenter/mouseleave instead of mouseover makes sure the toggle doesn't keep firing while your mouse pointer hovers over the div.

pingu Over a year ago

Ah, I had no idea this was possible. Thanks a ton for your help, and for the working example :)

Collectives™ on Stack Overflow

Replace one div with another div using dynamically created content

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related