SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  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,197
    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.


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
  •