CODEWITHSUNDEEP
phpjquery
Rob
Rob

Reputation: 6380

If Jquery variable equals the class of a div then set display to block

I'm outputting several divs using php - each div has a different country name for the class.

I'm also outputting a variable using jquery which checks if content of a div has changed. That variable will also be a country name.

If the jquery variable matches a div class, I want that div to .show(), how can I do that?

This is my (horrible) attempt:

(function($) {
    $(document).ready(function () {
        $("#block1").bind("DOMSubtreeModified", function() {
            message = $("#block1").html();
            regiondiv = '.';
            fullregion = regiondiv + message;
            alert(fullregion);

            if ($('.region-logos').hasClass(message)) {
                $(fullregion).show();
            } else {
                $(fullregion).hide();   
            }

        });
    });                             
})(jQuery);

If I click on Canada for instance, it will show the .Canada div, but if I click on Spain after it, it's shows the .Spain div as well as the .Canada div. I.e once you click on more than one it just continues to show them all. It doesn't hide the divs if you haven't click on it.

Upvotes: 2

Views: 288

Answers (3)

JohnnyFaldo
JohnnyFaldo

Reputation: 4161

(function($) {
    $(document).ready(function () {
        $("#block1").bind("DOMSubtreeModified", function() {
            var message = $("#block1").html();

            //ok so you have the variable to check 
            if($('.'+message).length > )) { //is there 1 or more of these classes in the DOM?
                $('.'+message).each(function() { //there is, loop and show them all 
                    $(this).show();  
                }); 
            }

        });
    });
})(jQuery);

EDIT

Ok looking at your updated answer, assuming there are multiple .region-logos you need to perform your if else within a loop of those:

$('.region-logos').each(function() {
    if($(this).hasClass(message)) {
       $(fullregion).show();
    }else {
       $(fullregion).hide();
    } 
});

Upvotes: 0

Mitul
Mitul

Reputation: 3427

var class = 'no-class';     
$(document).ready(function () {
    $("#block1").bind("DOMSubtreeModified", function() {
       var regiondiv = '.';
       var fullregion = regiondiv + class ;
       $(".fullregion").hide();
       class = $("#block1").html();
       fullregion = regiondiv + class ;
       $(".fullregion").show();
    });   
});

Upvotes: 1

Nishanth Matha
Nishanth Matha

Reputation: 6081

Not sure if I followed the question correctly. I assume you want to display a div if class of that div matches a variable in javascript. If so the you can try this:

(function($) {
    $(document).ready(function () {
        $("body").bind("DOMSubtreeModified", function() {
            // Not sure how are you generating this jquery variable
            var yourJqueryVariable;
            // Check if class name exists
            if ($(".yourJqueryVariable")[0]){
               $(".yourJqueryVariable").show(); //or even $(".yourJqueryVariable").css('display','block');
            }
        });
    });
})(jQuery);

Upvotes: 0

Related Questions