Set element width based on class

Question

I'm trying to set the width of an image depending on the class of seperate div using jQuery. I thought I could use an if statement but it isn't working.

$(document).ready(function() {
  if ($('#map-container').hasClass('zoom-100, zoom-130, zoom-150')) {
    $('#marker').css("width", 70);
  } else if ($('#map-container').hasClass('zoom-70, zoom-80')) {
    $('#marker').css("width", 40);
  } else {
    $('#marker').css("width", 25);
  }
});

Answer 1

If #marker is a child of #map-container, you dont need jquery - just use css and target the div accordingly. First set the base size and then set the size according to the parents classes.

 #marker {
   width: 25px;
 }

 #map-container.zoom-70 #marker,
 #map-container.zoom-80 #marker {
  width: 40px;
 }

 #map-container.zoom-100 #marker,
 #map-container.zoom-130 #marker,
 #map-container.zoom-150 #marker {
  width: 70px;
 }

If #marker is a sibling of #map-container, you still dont need jquery - just use css and target the div via the general sibling combinator " ~ ". First set the base size and then set the size according to the siblings classes.

 #marker {
   width: 25px;
 }

 #map-container.zoom-70 ~ #marker,
 #map-container.zoom-80 ~ #marker {
  width: 40px;
 }

 #map-container.zoom-100 ~ #marker,
 #map-container.zoom-130 ~ #marker,
 #map-container.zoom-150 ~ #marker {
  width: 70px;
 }

If you absolutely, positivly have to use jquery - then you can use a switch statement which is always better than multiple if statements.

Note that multiple statements can be blocked together and then the default statement occurs if none of the preceding statements evaluate to true.

The following snippet demonstrates the different switch statements;

 updateDiv(); $('#class-selector').change(function(){ document.querySelector('#map-container').className = 'zoom-' + $(this).val(); updateDiv(); }) function updateDiv() { switch(true) { case $('#map-container').hasClass('zoom-150'): case $('#map-container').hasClass('zoom-130'): case $('#map-container').hasClass('zoom-100'): $('#marker').css("width", 70).text('70px'); break; case $('#map-container').hasClass('zoom-80'): case $('#map-container').hasClass('zoom-70'): $('#marker').css("width", 40).text('40px'); break; default: $('#marker').css("width", 25).text('25'); } } 

 #map-container { border: solid 1px red; padding: 15px; } #marker { background: blue; color: white; text-align: center } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="map-container" class="zoom-100"> <p>This div with the red border is #map-container and the the following blue div is #marker. Changing the select list below will apply the different class to #map-container and will change the blue div accordingly.</p> <label>Select a different size to apply to the div</label> <select id="class-selector"> <option value="">None</option> <option value="70">zoom-70</option> <option value="80">zoom-80</option> <option value="100" selected>zoom-100</option> <option value="130">zoom-130</option> <option value="150">zoom-150</option> </select> <hr/> <div id="marker"></div> </div> 

Answer 2

使用jQuery is()方法

  $('#map-container').is('.zoom-100, .zoom-130, .zoom-150')

Answer 3

$(document).ready(function(){
    if ($('#map-container.zoom-100.zoom-130.zoom-150').length) {
        $('#marker').css("width", 70);
    }
    else if ($('#map-container.zoom-70.zoom-80').length) {
        $('#marker').css("width", 40);
    }
    else {
        $('#marker').css("width", 25);
    }
});

Answer 4

use js logic operators:

if( $('#myID').hasClass('class1') && $('#myID').hasClass('class2') ){
  /* do something */
}

Answer 5

As others mantioned, you can do this by css depending on your html. But if for some reason you want to use jQuery you can do it be using an or for each class.

 var $mapCon = $('#map-container') if ($mapCon.hasClass('zoom-100') || $mapCon.hasClass('zoom-130') || $mapCon.hasClass('zoom-150')) { $('#marker').css("background-color", "pink"); } else if ($mapCon.hasClass('zoom-70') || $mapCon.hasClass('zoom-80')) { $('#marker').css("background-color", "lightblue"); } else { $('#marker').css("background-color", "yellow"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="map-container" class="zoom-70">container</div> <div id="marker">test</div> 

Answer 6

hasClass() uses only one argument. You could find it on JQuery official doc .

You will have to implement multiple conditions.

Answer 7

.hasClass only accepts one parameter for checking for a single class. An alternative is to use the jQuery is function .

 if ($("#map-container").is(".zoom-100,.zoom-130,.zoom-150")) {
   $('#marker').css("width", 70);
 }

It doesn't make too much sense to use jQuery here. CSS would make much more sense, if there is not a special reason not mentioned in your example.

Answer 8

do not take multiple class names separated by coma in has calss method . the solution is bellow code

  $(document).ready(function () { //if ($('#map-container').hasClass('zoom-100, zoom-130, zoom-150')) { if ($('#map-container').hasClass('zoom-150')) { $('#marker').css("width", 270); } else if ($('#map-container').hasClass('zoom-130')) { $('#marker').css("width", 340); } else if ($('#map-container').hasClass('zoom-70')) { $('#marker').css("width", 40); } else { $('#marker').css("width", 25); } });