CODEWITHSUNDEEP
javascriptjqueryhtml
Mark Valenzuela
Mark Valenzuela

Reputation: 358

How can I optimize this jquery script? Different classes and same function

I have this jquery function but it is too long for me. Is there any way to make as one jquery change function. I need your help. 

 $(document).ready(function () {
                $('.sub-cat select').change(function () {
                    if ($('.sub-cat select option:selected').text() == "Other") {
                        $('.sub-cat .other-category').show();
                    }
                    else {
                        $('.sub-cat .other-category').hide();
                    }
                });
                $('.prod-type select').change(function () {
                    if ($('.prod-type select option:selected').text() == "Other") {
                        $('.prod-type .other-category').show();
                    }
                    else {
                        $('.prod-type .other-category').hide();
                    }
                });
                $('.prod-finnish select').change(function () {
                    if ($('.prod-finnish select option:selected').text() == "Other") {
                        $('.prod-finnish .other-category').show();
                    }
                    else {
                        $('.prod-finnish .other-category').hide();
                    }
                });
                $('.prod-color select').change(function () {
                    if ($('.prod-color select option:selected').text() == "Other") {
                        $('.prod-color .other-category').show();
                    }
                    else {
                        $('.prod-color .other-category').hide();
                    }
                });
                $('.prod-included select').change(function () {
                    if ($('.prod-included select option:selected').text() == "Other") {
                        $('.prod-included .other-category').show();
                    }
                    else {
                        $('.prod-included .other-category').hide();
                    }
                });
                $('.prod-series select').change(function () {
                    if ($('.prod-series select option:selected').text() == "Other") {
                        $('.prod-series .other-category').show();
                    }
                    else {
                        $('.prod-series .other-category').hide();
                    }
                });
            });

Upvotes: 1

Views: 67

Answers (4)

Sanket Shinde
Sanket Shinde

Reputation: 134

Please check below code. On selection of other option

            $(document).ready(function () {

                $('select').change(function () {
                    if($(this).find('option:selected').text() == "other"){
                        $(this).next().show();
                    }
                    else{
                        $(this).next().hide();
                    }
                });

            });
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    </head>
    <body>
        <div class="sub-cat">
            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                <option value="other">other</option>
            </select> 
            <div class="other-category" style="display: none;">
                <p>sub-cat other-category</p>
            </div>
        </div>
        <div class="prod-type">
            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                <option value="other">other</option>
            </select> 
            <div class="other-category" style="display: none;">
                <p>prod-type other-category</p>
            </div>
        </div>

    </body>

</html>

show below div .

Upvotes: 1

rynomite
rynomite

Reputation: 76

You can utilize data-attributes to help you out. I didnt test out this code, but I think something like this could possibly work. Update your HTML to be something like this

<select data-target="sub-cat"></select>
<div class="other-category" data-target="sub-cat"></div>

Followed by this abbreviated jquery code...

$(document).ready(function () {
    $('select').change(function() {
        var target = $(this).data('target'),
            isSelected = $(that).find('option:selected').text() == "Other";
        $(this).find('.other-category[data-target="'+target+'"]').toggleClass(isSelected);
    })
});

By storing the attributes in a data-attribute, you can easily access that in your javascript code, targeting specific elements much more easily.

Upvotes: 0

Soviut
Soviut

Reputation: 91585

You can select several elements at once by separating their class selections with a comma.

$('.sub-cat, .prod-type, .prod-finnish, .prod-color, .prod-included, .prod-series').change(function() {
     var $this = $(this); // cache this so we don't have to wrap it twice
     $this.toggle($this.find('option:selected').text() == "Other"));
});

It's then just a matter of using .toggle() and passing in a boolean; In our case whether the selected option has "Other" as its text.

This has a really good performance advantage since you only need one event delegate to handle the change event for all the elements in the selector.

Upvotes: 1

Satpal
Satpal

Reputation: 133423

Assign a common class i.e. 'commonClass' to all the parent element i.e. 'sub-cat, prod-included,...', then use various DOM traversal methods to target 'other-category' element.

Learn to use this, element which initiated the event

$('.commonClass select').change(function () {
    $(this).closest('.commonClass').find('.other-category').toggle($('option:selected', this).text() == "Other");
});

References

  1. .closest()
  2. .find()
  3. .toggle()

Upvotes: 2

Related Questions