JQuery help

GT9 · Aug 8, 2016

මචංල මම JQuery ගැන වැඩිය දන්නෑ. මට මචංල මේක කරන විදිය පොඩ්ඩක් පැහැදිලි කරල දෙන්න. මම කරන්න උත්සාහ කරන දේ සරල වෙන්න බොහොම සරල කෝඩ් එකක් ලිව්ව. මේ තියෙන්නේ ඒක. ටෙස්ට් කරන්න ඔය කෝඩ් එක කොපි කරල blank .html පේජ් එකකට සේව් කරල browser එකෙන් Open කරන්න.

PHP:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <button>hide me 1</button>
    <h2 hideme>hide me 1</h2>

    <button>hide me 2</button>
    <h2 hideme>hide me 2</h2>

    <button>hide me 3</button>
    <h2 hideme>hide me 3</h2>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
    	$(function() {
    		var button = $('button');
    		button.click(function() {
    			$('h2[hideme]').hide();
    		});
    	});
    </script>
  </body>
</html>
</body>
</html>

මට මචංල වෙන්න ඕන ඔය එක් එක් බටන් එක click කරාම ඒකට අදාල h2 එක විතරක් hide වෙන්න. ඔතනදි නම් එක button එකක් click කරාම ඔක්කොම H2 hide වෙනවනේ.

මට මචංල මේක එකින් එක id දාල නෙමේ කරගන්න ඕන. එකම කෝඩ් එකෙන් මේ වගේ elements group ඕන ප්‍රමානයක් handle කරන්න පුලුවන් වෙන්න ඕන. අන්න එතන තමයි වැදගත්. නැත්නම් element එකෙන් එකට js කෝඩ් එක update කරන්න වෙනව.

GT9 · Aug 8, 2016

Rajitha dilshan said:
bump

thanks machna rep+

topkollek · Aug 8, 2016

wtf is this?

Rajitha dilshan · Aug 8, 2016

ඔන්න jqueryගැන දැනගන්න පොතක් මගෙන් උබට..තව අඩ්වාන්ස් පොත් තියනෙවා..ඔනෙ නම් කියපන්කො..

http://www.mediafire.com/download/k28ovdyyp42z8zy/jqueryforbeginnersjqueryconference2009-090914063709-phpapp02.ppt

GT9 · Aug 8, 2016

topkollek said:
wtf is this?

සරල කෝඩ් එකක් මචං, මම කරන්න හදන්නේ මේක නොවුනත් මේක මට ඕන විදියට වැඩ කරන්න හදා ගත්තොත් මට අවශ්‍ය දේ කරගන්න පුලුවන්.

Rajitha dilshan said:
ඔන්න jqueryගැන දැනගන්න පොතක් මගෙන් උබට..තව අඩ්වාන්ස් පොත් තියනෙවා..ඔනෙ නම් කියපන්කො..

http://www.mediafire.com/download/k28ovdyyp42z8zy/jqueryforbeginnersjqueryconference2009-090914063709-phpapp02.ppt

thanks macho

GT9 · Aug 8, 2016

පොඩ්ඩක් වැඩේ ගොඩදාගත්ත, ඒත් තව ටිකක් හදන්න ඕන.

PHP:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  	<div wrap>	
    	<button>hide me 1</button>
    	<h2 hideme>hide me 1</h2>
    </div>	
	
	<div wrap>
	    <button>hide me 2</button>
	    <h2 hideme>hide me 2</h2>
    </div>

    <div wrap>
	    <button>hide me 3</button>
	    <h2 hideme>hide me 3</h2>
    </div wrap>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
    	/*
    	$(function() {
    		var button = $('button');
    		button.click(function() {
    			$('h2[hideme]').hide();
    		});
    	});
    	*/

    	$(function() {
    		$('div[wrap]').each(function() {
    			$(this).add('button').click(function() {
    				$(this).add('h2[hideme]').hide();
    			});
    		});
    	});
    </script>
  </body>
</html>
</body>
</html>

GT9 · Aug 8, 2016

හරි මචංල වැඩේ ගොඩදාගත්ත ස්තුතියි ත්‍රෙඩ් එකට රිප්ලයි කර හැමෝටම.

PHP:

$(function() {
    		$('div[wrap]').each(function() {
    			$(this).add('button').click(function() {
    				$(this).find('h2[hideme]').hide();
    			});
    		});
    	});

GT9 · Aug 8, 2016

You must spread some Reputation around before giving it to topkollek again.

topkollek · Aug 8, 2016

Code:

    <button data-hideme="1">hide me 1</button> 
    <h2 data-hideme="1">hide me 1</h2> 

    <button  data-hideme="2">hide me 2</button> 
    <h2  data-hideme="2">hide me 2</h2> 

...

$('button').click(function() { 
               var id = $(this).data('hideme');
               var element = $('[data-hideme="'+ id + '"');
               element.hide(); 
            });

onna ohoma dala nam puluwan wei. not tested

GT9 · Aug 8, 2016

topkollek said:

Code:

    <button data-hideme="1">hide me 1</button> 
    <h2 data-hideme="1">hide me 1</h2> 

    <button  data-hideme="2">hide me 2</button> 
    <h2  data-hideme="2">hide me 2</h2> 

...

$('button').click(function() { 
               var id = $(this).data('hideme');
               var element = $('[data-hideme="'+ id + '"');
               element.hide(); 
            });

onna ohoma dala nam puluwan wei. not tested

බොහොම ස්තුතියි මචං රිප්ලයි එකට. මට ඕන කරේ මචංල එකම කෝඩ් එකෙන් element group කැමති ගානක් id වගේ attributes elements ඇතුලට නොදා වැඩේ කරගන්න. මම ගැටලුව විසඳගත්ත.

මචංගෙ වෙලාවට ගොඩක් තෑන්ක්ස්.

කලින් රෙප් දීල. :sorry:

biskubiskulahila · Aug 8, 2016

here's an updated fiddle with your answer:
https://[/B][/COLOR][/SIZE]jsfiddle.net/muj6xayr/

GT9 · Aug 8, 2016

biskubiskulahila said:
here's an updated fiddle with your answer:
https://[/B][/COLOR][/SIZE]jsfiddle.net/muj6xayr/

තෑන්ක්ස් මචෝ රිප්ලයි එකට. මේකෙදි වෙන්නේ මචං මොකක් හරි බටන් එකක් click කරාම තියෙන සියලුම h2 hide වෙන එකනේ. මට ඕන කරල තිබ්බේ බටන් එක click කරාම ඒකට අදාල h2 එක විතරක් hide වෙන්න.

මම ගැටලුව විසඳගත්ත මචං.

rep+

සුදු පුතා · Aug 8, 2016

class ekak or id ekak dila lesiyen karaganna puluwanne. hari simple.

jaycharm · Aug 9, 2016

BumPiYo....Akkiyo

Search

Latest ads

JQuery help

GT9

Well-known member

GT9

Well-known member

topkollek

Well-known member

Rajitha dilshan

Well-known member

GT9

Well-known member

GT9

Well-known member

GT9

Well-known member

GT9

Well-known member

topkollek

Well-known member

GT9

Well-known member

biskubiskulahila

Well-known member

GT9

Well-known member

සුදු පුතා

Well-known member

jaycharm

Active member

Similar threads