SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Efficiently Shorten - using jquery

    I need to see if I can shorten this AND see if I can have a "show all option" added.

    The page is setup like so..
    I have the following javascript working.. I'm running jquery... being a semi newbie it took a while to get this running.

    I have 4 DISTINCT queries that load up select boxes.

    There are 4 select boxes .. on change, the queries will see what option was selected and re-run DISTINCT SQL queries so all the select boxes only have related info.. so no one ends up with a "zero" results.

    I'm hiding these to help walk through in a logical order. However I need to
    1) Have a show all and let them select anything they wish and show all 4 boxes. How can I add a "show all" to the script below
    2) I noticed on page load the boxes show and then slowly hide. THis looks messy.. how can I alter that?
    3) This seems long for what I'm doing.. is there a way I can shorten this code? What if I expand to 8 boxes.. then I'll have 8 simple if statements.. but it seems unnecessary.

    CODE that is working is


    $(document).ready(function () {
    if ($("#pMaterial option").is(":selected"))
    {
    //show the hidden div
    $("#pPoint").show("fast");
    }
    else
    {
    //otherwise, hide it
    $("#pPoint").hide("fast");
    }

    if ($("#pPoint option").is(":selected"))
    {
    //show the hidden div
    $("#pLength").show("fast");
    }
    else
    {
    //otherwise, hide it
    $("#pLength").hide("fast");
    }
    if ($("#pLength option").is(":selected"))
    {
    //show the hidden div
    $("#pThread").show("fast");
    }
    else
    {
    //otherwise, hide it
    $("#pThread").hide();
    }
    if ($("#pThread option").is(":selected"))
    {
    //show the hidden div
    $("#pDiameter").show("fast");
    }
    else
    {
    //otherwise, hide it
    $("#pDiameter").hide();
    }
    if ($("#pDiameter option").is(":selected"))
    {
    //show the hidden div
    $("#pFinish").show("fast");
    }
    else
    {
    //otherwise, hide it
    $("#pFinish").hide();
    }
    });

    The boxes are wrapped in divs like so
    <div id="pMaterial" style="width:150px;float:left;">select box here</div>
    <div id="pPoint" style="width:150px;float:left;">select box here</div>

    Any help is greatly appreciated

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You could probably shorten it to be about this short

    Code JavaScript:
    $(function() {
        var each = ['#pMaterial', '#pPoint', '#pLength', '#pThread', '#pDiameter'];
        var mtch = ['#pPoint', '#pLength', '#pThread', '#pDiameter', '#pFinish'];
     
        $.each(each, function(i) {
            if ($('option', this).is(':selected')) {
                $(mtch[i]).show('fast');
            } else {
                $(mtch[i]).hide('fast');
            }
        });
     
        $('#show-all').click(function(e) {
            e.preventDefault();
     
            $.each(mtch, function() {
                $(this).show('fast');
            });
        });
    });
    1) Have a show all and let them select anything they wish and show all 4 boxes. How can I add a "show all" to the script below
    In the above code i added an event handler for a click event, simply create an anchor element in your page like the below example.
    HTML Code:
    <a href="#" id="show-all">Show all</a>
    2) I noticed on page load the boxes show and then slowly hide. THis looks messy.. how can I alter that?
    Is there a live demo where i can see this as its hard to debug just by the code.

    3) This seems long for what I'm doing.. is there a way I can shorten this code? What if I expand to 8 boxes.. then I'll have 8 simple if statements.. but it seems unnecessary.
    Shortened code above, if you need an explanation to how it works let me know but its pretty much straight forward.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Tags for this Thread

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
  •