SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript chaining

    Hello everybody.

    I am just starting with javascript and I am wondering how it should be done.
    I mean... array of functions.

    You dont have to be a genius to know that array could be defined like this:


    Code JavaScript:
    var myfunction = function() {
         return {
             func1: function() {
     
             },
             func2: function() {
     
             }
         }
    }

    This syntax allow us to use chaining like jQuery does.

    Code JavaScript:
    myfunction.func1()

    But I tried to insert a function which hiding paragraph in this way and I can't get a clue.

    Code JavaScript:
    function show(node) {
      if(node && node.style) {
        node.style.display = "block";
      }
    }
     
    function hide(node) {
      if(node && node.style) {
        node.style.display = "none";
      }
    }

    They just won't work in this way I presented up. Please guys I am asking for an advice.

    Thanks in advance.

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need 2 separate functions to show or hide an element.

    You can do it using just a single function.

    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                function showHide(elemId){
                    var obj = document.getElementById(elemId);
                    obj.style.display = (obj.style.display == 'none')? 'block' : 'none';
                }
            </script>
        </head>
        <body>
            <p id="myP">This is my paragraph</p>
            <div>
                <button onclick="showHide('myP');">Show/Hide paragraph</button>
            </div>
        </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I know.

    That's example functions. I just want to know how to implement these functions in this scheme, because I can't get it to work.

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, it isn't clear in your op if the primary purpose is chaining itself or using chaining to show/hide an element.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got any solution?

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nydiann View Post
    Got any solution?
    yeah, but I'm now helping someone else on another website. I'll pop back later.

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    var funcs = function() {
    	return {	
    		$: function (id) {
    			if(id.substr(0,1) == ".") { 
    				return document.getElementsByClassName( id.substring(1) ).item(0);
    			} else if(id.substr(0,1) == "#") {
    				return document.getElementById( id.substring(1) ); 	
    			}
    			return {
    				hide: function () {
    					if($(id) && $(id).style) {
    						$(id).style.display = "none";
    					}
    					return $(id);
    				}
    			};
    		},
     
    	};
    }
     
     
     
    function func() {
    	funcs().$('.a').hide;
    }

    I want use it in this way
    Code JavaScript:
    funcs().$('.a').hide;
    but it's not working , whats wrong?

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone?

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    To be able to chain methods together in JavaScript each method needs to return a pointer to the object that the method belongs to. Then since the returned value is the same object as was originally referenced it can then have another method of that object chained to the end of it.

    Code:
    x = function() {
    this.a = function() {alert('a'); return this;}
    this.b = function() {alert('b'); return this;}
    return this;
    }
    y = new x();
    y.a().b();
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mate.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •