Problem z Java Script [JQuery]!

0

Mam taki oto kod z wykorzystaniem JQuery:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <script type="text/javascript"> 

        $(document).ready(function() { 
        //fade functions 
        $("#fadein").click(function () {    // When any link is clicked 
        $("#fadeeffect").fadeIn("slow"); //fade in effect 
        }); 
        $("#fadeout").click(function () {   // When any link is clicked 
        $("#fadeeffect").fadeOut("slow"); //fade out effect 
        }); 
        }); 
        </script> 

</head>
<body>
        <input type="button" id="fadein"  value="Fade In" /> 
        <input type="button" id="fadeout"  value="Fade Out" /> 
        <div id="fadeeffect"> 
                  BLE, BLE
        </div> 
</body>        
</html>

Jednak chciałbym więcej div'ów odsłaniać i ukrywać z tym efektem bez kilkakrotnego powtarzania kodu zmieniajac wszystkie "id"! Nie chciałbym aby to wyglądało tak bo strasznie dużo kodu zajmuje:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <script type="text/javascript"> 
        
        $(document).ready(function() { 
        //fade functions 
        $("#fadein").click(function () {    // When any link is clicked 
        $("#fadeeffect").fadeIn("slow"); //fade in effect 
        }); 
        $("#fadeout").click(function () {   // When any link is clicked 
        $("#fadeeffect").fadeOut("slow"); //fade out effect 
        }); 
        }); 

        $(document).ready(function() { 
        //fade functions 
        $("#drugiin").click(function () {    // When any link is clicked 
        $("#drugieffect").fadeIn("slow"); //fade in effect 
        }); 
        $("#drugiout").click(function () {   // When any link is clicked 
        $("#drugieffect").fadeOut("slow"); //fade out effect 
        }); 
        }); 
        </script> 

</head>
<body>
        <input type="button" id="fadein"  value="Fade In" /> 
        <input type="button" id="fadeout"  value="Fade Out" /> 
        <div id="fadeeffect"> 
                  BLE, BLE
        </div> 

        <input type="button" id="drugiin"  value="Fade In" /> 
        <input type="button" id="drugiout"  value="Fade Out" /> 
        <div id="drugieffect"> 
                  BLE, BLE
        </div> 
</body>        
</html>

Z góry dzięki za wszelką pomoc ;-)

0

na przykład:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script type="text/javascript">
		$(document).ready(function()
		{
			$(".fadein").click(
				function ()
					{
					var div = document.getElementById($(this).attr('rel'));
					$(div).fadeIn("slow");
					}
			);

			$(".fadeout").click(
				function ()
					{
					var div = document.getElementById($(this).attr('rel'));
					$(div).fadeOut("slow");
					}
			);

		});
		</script>

</head>
<body>
        <input type="button" class="fadein"  value="Fade In" rel="fadeeffect"/>
        <input type="button" class="fadeout"  value="Fade Out" rel="fadeeffect" />
        <div id="fadeeffect">
                  BLE, BLE
        </div>

        <input type="button" class="fadein"  value="Fade In" rel="drugieffect" />
        <input type="button" class="fadeout"  value="Fade Out"  rel="drugieffect" />
        <div id="drugieffect">
                  BLE, BLE
        </div>
</body>
</html>

naciśnięcie klawisza klasy fadein rozwija div, który jest podany w parametrze rel... możliwości jest dużo ;)

0

O super wielkie dzięki!

Ja piszę moją stronkę w Eclipse i wyskakuje mi błąd w linijkach tego typu:

<input type="button" class="fadein" value="Fade In" rel="drugieffect" />

: "Undefined attribute name (rel)"

A i chciałbym aby przy załadowani strony div'y były ukryte ;)

0

zmień ten rel na name

<input type="button" class="fadein"  value="Fade In" name="drugieffect" />

to samo w skrypcie

var div = document.getElementById($(this).attr('name'));

ustaw styl dla divów ;)

np.

<div id="drugieffect" style="display:none;">
0

Super! Wielkie dzięki madmike ;-)

1 użytkowników online, w tym zalogowanych: 0, gości: 1