CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user715564
user715564

Reputation: 1690

Confine jquery if statement to respective divs

I have a simple jquery plugin that I am calling on two different divs. The plugin includes an if statement and the results are being applied to both divs instead of the actual div the user interacted with. Here is my plugin:

(function ($) {
    $.fn.selectBox = function () {
        $(this).find('.ms-section-select li:first-child').addClass('ms-checked');


        function get() {
            $('.ms-section-select li').click(function (event) {

                $(this).siblings('.ms-section-select li').removeClass('ms-checked');
                $(this).addClass('ms-checked');


                if ($('.ms-new-select').hasClass('ms-checked')) {
                    $('.new-box').show();
                    $('.used-box, .all-box').hide();
                }

                if ($('.ms-used-select').hasClass('ms-checked')) {
                    $('.used-box').show();
                    $('.new-box, .all-box').hide();
                }

                if ($('.ms-all-select').hasClass('ms-checked')) {
                    $('.all-box').show();
                    $('.used-box, .new-box').hide();
                }

            });
        }

        return this.each(get);
    };
})(jQuery);

Here is the jsfiddle with the html/css/js http://jsfiddle.net/977hv/16/

I tried using $(this).find(...), $(this).next(...), and several other solutions in the if statement but I can't figure out how to separate the two divs from each other.

Upvotes: 1

Views: 113

Answers (2)

dave
dave

Reputation: 64725

You are "losing" your original reference to this:

function ($) {
  $.fn.selectBox = function () {
    $(this).find('.ms-section-select li:first-child').addClass('ms-checked');
    var that = this; //save your this to a different variable, that

    function get() {
        $('.ms-section-select li').click(function (event) {
            //this is now the .ms-section-select li element
            $(this).siblings('.ms-section-select li').removeClass('ms-checked');
            $(this).addClass('ms-checked');

            //but we can still use that
            if ($(that).find('.ms-new-select').hasClass('ms-checked')) {

jsfiddle.net/977hv/17

Upvotes: 1

dfsq
dfsq

Reputation: 193301

You need to reference current jquery instance. Take a look at fixed version:

$.fn.selectBox = function () {

    // Current box reference 
    var $this = $(this);

    $(this).find('.ms-section-select li:first-child').addClass('ms-checked');

    function get() {
        $('.ms-section-select li', this).click(function (event) {

            $(this).siblings('.ms-section-select li').removeClass('ms-checked');
            $(this).addClass('ms-checked');

            if ($('.ms-new-select', $this).hasClass('ms-checked')) {
                $('.new-box', $this).show();
                $('.used-box, .all-box', $this).hide();
            }

            if ($('.ms-used-select', $this).hasClass('ms-checked')) {
                $('.used-box', $this).show();
                $('.new-box, .all-box', $this).hide();
            }

            if ($('.ms-all-select', $this).hasClass('ms-checked')) {
                $('.all-box', $this).show();
                $('.used-box, .new-box', $this).hide();
            }

        });
    }

    return this.each(get);
};

Then you should search for .ms-new-select within current box $this:

if ($('.ms-new-select', $this).hasClass('ms-checked')) {
    $('.new-box', $this).show();
    $('.used-box, .all-box', $this).hide();
}

Demo: http://jsfiddle.net/977hv/18/

Upvotes: 0

Related Questions