Is there a simpler way of doing this ?

[aaronhockey_09]

Hey, so i have 4 Divs around a Circle, and when you hover, that content is displayed inside of the circle.
This is what i have working.
Is there a simpler way of doing this ? Or would this be proper ?

<script type="text/javascript">
	$(document).ready(function(){
                $(".ss1").hover(function()
                {
                    $(".sc2").css("display", "block");
					$(".sc").css("display", "none");
                }, function()
                {
                    $(".sc2").css("display", "none");
					$(".sc").css("display", "block");

					
                });
				
				
				 $(".ss2").hover(function()
                {
                    $(".sc3").css("display", "block");
					$(".sc").css("display", "none");
                }, function()
                {
                    $(".sc3").css("display", "none");
					$(".sc").css("display", "block");

					
                });
				
				 $(".ss3").hover(function()
                {
                    $(".sc1").css("display", "block");
					$(".sc").css("display", "none");
                }, function()
                {
                    $(".sc1").css("display", "none");
					$(".sc").css("display", "block");

					
                });
				
				 $(".ss4").hover(function()
                {
                    $(".sc4").css("display", "block");
					$(".sc").css("display", "none");
                }, function()
                {
                    $(".sc4").css("display", "none");
					$(".sc").css("display", "block");

					
                });
            });
    </script>

Like is tehre any way to not have to copy and paste that code a bunch of times. Some sort of array or something.

[Arnaud]

Well, if I understand your code correctly, you have 4 elements (ss1, ss2, ss3, ss4) and one content holder (sc) in which you want to display custom content when hovering the ss1 to ss4 elements.

What I don't undersand from your code is the relation between your elements. Hovering ss1 displays sc2 / ss2 -> sc3 / ss3 -> sc1 / ss4 -> sc4

A quite easy approach would be to use a common class for your hover elements and loop through them, then replacing the main container's content with another DIV's content, based on your hover elements' ids.

PHP Code:

$(function() {

    $(".hover-element").each(function() {

        $(this).mouseover(function() {

            $("#containerElement").html($("#" + $(this).attr('id') + "Content").html());
        });
    });
}); 


And your HTML would be:

PHP Code:

<div id="ss1" class="hover-element">

    Element 1
</div>

<div id="ss2" class="hover-element">

    Element 2
</div>

<div id="ss3" class="hover-element">

    Element 3
</div>

<div id="ss4" class="hover-element">

    Element 4
</div>

<div id="ss1Content" style="display:none;">

    The HTML Content of Element 1
</div>

<div id="ss2Content" style="display:none;">

    The HTML Content of Element 2
</div>

<div id="ss3Content" style="display:none;">

    The HTML Content of Element 3
</div>

<div id="ss4Content" style="display:none;">

    The HTML Content of Element 4
</div>

<div id="containerElement">
    Nothing here yet
</div> 


Note the dot notation ".hover-element" instead of "#elementId" to identify a CSS class rather than an element's ID.

Do you get the point? Of course, there are other ways to do that, with less HTML, having each element's content in a javascript array for example. This is quick and dirty but illustrates how you can loop through a range of HTML elements and interact with others, and simplify your javascript code by the use of .each() and $(this).

[Spudhead]

You don't even need to do the looping-event-attaching thing, do you? Why not just:

PHP Code:

$(function() { 

    $(".hover-element").on('mouseover', (function() { 

            $("#containerElement").html($("#" + $(this).attr('id') + "Content").html()); 

    });

}); 


[Arnaud]

True. You can do that too, it's even simpler.

Your code has a typo though, so here is a clean version:

PHP Code:

$(function() { 

    $(".hover-element").on('mouseover', function() { 

        $("#containerElement").html($("#" + $(this).attr('id') + "Content").html());
    });
});