在单击“提交”时显示和隐藏具有相同类但ID不同的多个DIV

Question

I have a number of DIVs with the same class applied, but unique IDs. I want all the DIVs to be hidden on page load, then when the submit button is clicked I want one of the DIVs (determined by the ID) to become visible.

I thought the best way to do this would be using CSS classes.

I have set their default class in CSS to "inactive" with .configImageTitleInactive {display:none;}

I have a second class "active" with .configImageTitleActive {display:block;}

I have already defined and successfully populated the global variables temp1, temp2 and temp3, as these are being used elsewhere on the page.

When the submit button is clicked I need the code to:

1. Check if any of the DIVs already have the configImageTitleActive applied to the class and if so, change that class back to configImageTitleInactive .

2. Collate the 3 temp variables together (not numerically as these variables contain letters)

3. Compare the combined value against the IDs of the DIVs and switch on the visibilty of that DIV

The javascript code is below:

    $(document).ready(function() {
$('img.submit').click(function() {
var $configImageTitle = temp1 + temp2 + temp3;
if ($configImageTitle == "cp-xos"){
        $("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
        var configImageTitleTemp = document.getElementById('cp-xos');
        $configImageTitleTemp.addClass("configImageTitleActive");
}
else if ($configImageTitle == "cp-uos"){
        $("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
        var configImageTitleTemp = document.getElementById('cp-uos');
        $configImageTitleTemp.addClass("configImageTitleActive");
}
else if ($configImageTitle == "cp-uod"){
        $("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
        var configImageTitleTemp = document.getElementById('cp-uod');
        $configImageTitleTemp.addClass("configImageTitleActive");
}
else {
        $("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
        var configImageTitleTemp = document.getElementById('cp-xod');
        $configImageTitleTemp.addClass("configImageTitleActive");
};
});
});

And the HTML:

<div class="configImageTitleBlock">
<div class="configImageTitleInactive" id="cp-xos">I am 1 CP-XOS</div>
<div class="configImageTitleInactive" id="cp-uos">I am 2 CP-UOS</div>
<div class="configImageTitleInactive" id="cp-uod">I am 3 CP-UOD</div>
<div class="configImageTitleInactive" id="cp-xod">I am 4 CP-XOD</div>

</div>

I'm open to suggestions, if there is a better way to do this. Thank you in advance for your help.

Answer 1

Hm, I see you are using jQuery but not using the full power of it. Here's how you can do your task:

var configImageTitle = temp1 + temp2 + temp3;
$('div.configImageTitleActive').removeClass("configImageTitleActive").addClass("configImageTitleInactive");
$('#'+configImageTitle).addClass("configImageTitleActive");

ADDED:

As about doing it better:

<div class="configImageTitleBlock">
    <div class="block" id="cp-xos">I am 1 CP-XOS</div>
    <div class="block" id="cp-uos">I am 2 CP-UOS</div>
    <div class="block" id="cp-uod">I am 3 CP-UOD</div>
    <div class="block" id="cp-xod">I am 4 CP-XOD</div>
</div>

------- CSS --------
.configImageTitleBlock div.block {
    display: none;
}

.configImageTitleBlock div.block.active {
    display: block;
}

------- CSS --------
...eventandstuff(function() {
    var activeElem = temp1 + temp2 + temp3;
    $('.configImageTitleBlock div.block.active').removeClass("active");
    $('#'+activeElem).addClass("active");
});

CSS has priorities of how properties are applied. In essence - the more detailed definition is in CSS - the higher priority it has. For example div {display: none} has lower priority than div.someclass {display: block} .

So in essence, I defined a class active , and a CSS rule for it .block.active which is more specific than just .block , that's why when it's applied, the rule from .block.active gets higher priority.

This approach is better because you don't need to define two separate classes for active and inactive. You can only use the active one.

Another advice: don't make classes that are context-specific, like configImageTitleInactive . Better make a generic class inactive or active and then just write more specific rule, like .configImageTitleBlock .active - this makes it more understandable and code is cleaner.

Answer 2

I think it would be better not to remove the main class and simply add class "active" instead, then check if element has class "active"

CSS:

<style>
.configImageTitle { display: none; }
.configImageTitle.active { display: block; }
</style>

JQuery:

$(document).ready(function() {
    $('img.submit').click(function() {
        var $configImageTitle = temp1 + temp2 + temp3;
        if ($configImageTitle == "cp-xos"){
            $("div.configImageTitle").hasClass("active") ? $("div.configImageTitle").removeClass("active") : "";
            var configImageTitleTemp = $("#cp-xos");
                $configImageTitleTemp.addClass("active");
        } else {
            /* and so on */
        }
    });
});

Answer 3

You could use a better logic like try setting all the divs visibility:hidden like shown below

<div class="configImageTitleInactive" id="cp-xos" style="visibility:hidden">I am 1 CP-XOS</div>

and from javascript access the div and set its visibilty to visible. Thanks AB

Answer 4

I guess pretty much what @Max wrote, just with a running example:

http://jsbin.com/agawov/11/edit

$( document ).ready(function() {    

 $(document)
  .find('.configImageTitleBlock > div.configImageTitleActive')
  .removeClass("configImageTitleActive");

 $(document)
  .find('.configImageTitleBlock > div#cp-xos')        
  .removeClass('configImageTitleInactive')      
  .addClass('configImageTitleActive');

});

Cheers.

Vitor.