Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    207
    Thanks
    6
    Thanked 0 Times in 0 Posts

    make function shorter

    I have the following JQuery code (working), but I would like to know if it can be shorter and if so, how?

    Code:
    $(function(){
      $('.blok').mouseenter(function(){
        $(this).find('#message-1').show();
      }).mouseleave(function(){
        $(this).find('#message-1').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-2').show();
      }).mouseleave(function(){
        $(this).find('#message-2').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-3').show();
      }).mouseleave(function(){
        $(this).find('#message-3').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-4').show();
      }).mouseleave(function(){
        $(this).find('#message-4').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-5').show();
      }).mouseleave(function(){
        $(this).find('#message-5').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-6').show();
      }).mouseleave(function(){
        $(this).find('#message-6').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-7').show();
      }).mouseleave(function(){
        $(this).find('#message-7').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-8').show();
      }).mouseleave(function(){
        $(this).find('#message-8').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-9').show();
      }).mouseleave(function(){
        $(this).find('#message-9').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-10').show();
      }).mouseleave(function(){
        $(this).find('#message-10').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-11').show();
      }).mouseleave(function(){
        $(this).find('#message-11').hide();
      });
      $('.blok').mouseenter(function(){
        $(this).find('#message-12').show();
      }).mouseleave(function(){
        $(this).find('#message-12').hide();
      });
    });
    The message-#(numbers) are div's.

    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,638
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Hell yeah, this can be made shorter. But it would help to see your HTML in order to suggest a more generic traversal method.

    The first thing that comes to my mind right now would be:
    Code:
     $('.blok').mouseenter(function(){
       $(this).find('[id*=message]').show();
     }).mouseleave(function(){
       $(this).find('[id*=message]').hide();
     });
    That’s the “contains” selector; alternatively you could use the “starts with” selector: [id^=message] or the “contains prefix” selector (string separated by hyphens): [id|=message]
    Last edited by VIPStephan; 03-28-2012 at 12:40 AM.

  • Users who have thanked VIPStephan for this post:

    UD2006 (03-28-2012)

  • #3
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by UD2006 View Post
    I have the following JQuery code (working), but I would like to know if it can be shorter and if so, how?
    Do you mean just shorter jquery code or shortening the total actual javascript that your jquery runs in the background?

    Sometimes newbies get excited because they can do something with just 1 or 2 lines of jquery without realising that the jquery could be running 50, 100 or 100's of lines of javascript in the background to do that thing.

    If you code the task using plain javascript then 99.99% of the times that will be the shortest actually run code.

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    207
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Hell yeah, this can be made shorter. But it would help to see your HTML in order to suggest a more generic traversal method.

    The first thing that comes to my mind right now would be:
    Code:
     $('.blok').mouseenter(function(){
       $(this).find('[id*=message]').show();
     }).mouseleave(function(){
       $(this).find('[id*=message]').hide();
     });
    That’s the “contains” selector; alternatively you could use the “starts with” selector: [id^=message] or the “contains prefix” selector (string separated by hyphens): [id|=message]
    Thanks, that did it.


  •  

    Posting Permissions

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