Idetnifikace třídy v JavaScriptu pomocí proměnné

Dvory59

Ahoj. Potřeboval bych poradit s identifikací třídy v JavaScriptu.

Z databáze si posílám projekty, které pak vypisuji pomocí foreach.

{foreach $allProjects as $project}
<h4 class="toggle-dropdown">{$project->name_en}</h4>
	<p class="dropdown-abst">'.....</p>
{/foreach}

Kde <p> je defaultně skryto a zobrazuje se pomocí JavaScriptu při přejetí myší na <h4>. Kód mám takto :

<script>
$(function () {
    $(".toggle-dropdown ").hover(function() {$(".dropdown-abst").toggle();} );
});
</script>

Ale problém je, že tento kód mi při najetí na jeden projekt zobrazí všechny. Chtěl jsem to vyřešit přidáním ID do třídy :

<h4 class="toggle-dropdown {$project->id}">{$project->name_en}</h4>
<p class="dropdown-abst {$project->id}">'.....</p>

A v JS pak:

 $(function () {
   $(".toggle-dropdown ."+{$project->id}).hover( function() { $(".dropdown-abst ."+{$project->id}).toggle(); } );
});

Ale to je asi hloupost…
Mohu poprosit o radu, jak by se tento problém dal vyřešit?

GEpic

<h4 class="toggle-dropdown">{$project->name_en}</h4>
<p class="dropdown-abst">'.....</p>

<script>
	$(function() { /* alias $(document).ready(function() { */
    	$(".toggle-dropdown").hover(function() {
			$(this).next().toggle();
		});
	});
</script>

Viz jQuery API zde

PS: Nejedná se ani tak o problém Nette, ale spíše JS / jQuery, příště zkus stackoverflow :)

Editoval GEpic (16. 4. 2018 13:17)