javascript - Set element width based on class - Stack Overflow

admin管理员组

文章数量:1023628

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);
  }
});

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);
  }
});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 26, 2018 at 10:22 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Oct 26, 2018 at 10:16 NightPorterNightPorter 1711010 bronze badges 6

• 1 Use css why jquery?hasClass accepts only one parameter. – Sumesh TG Commented Oct 26, 2018 at 10:17
• 2 This is not how .hasClass works, it expects a single class name as parameter. If you want to test if the element has any of these classes, then you need to join multiple hasClass calls using || – misorude Commented Oct 26, 2018 at 10:20
• 2 TBO i think you should solve this in CSS only. you can nest selectors. no jquery required – Philipp Sander Commented Oct 26, 2018 at 10:21
• try element.is('.class1, .class2') – Sooriya Dasanayake Commented Oct 26, 2018 at 10:21
• 1 @NightPorter i have added an example. you can check – Death-is-the-real-truth Commented Oct 26, 2018 at 10:31

 |  Show 1 more ment

8 Answers 8

Sorted by: Reset to default 6

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 binator "~". 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./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>

use jQuery is() method

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

$(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);
    }
});

use js logic operators:

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

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-container" class="zoom-70">container</div>
<div id="marker">test</div>

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

You will have to implement multiple conditions.

.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.

do not take multiple class names separated by a 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);
            }
        });

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);
  }
});

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);
  }
});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 26, 2018 at 10:22 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Oct 26, 2018 at 10:16 NightPorterNightPorter 1711010 bronze badges 6

• 1 Use css why jquery?hasClass accepts only one parameter. – Sumesh TG Commented Oct 26, 2018 at 10:17
• 2 This is not how .hasClass works, it expects a single class name as parameter. If you want to test if the element has any of these classes, then you need to join multiple hasClass calls using || – misorude Commented Oct 26, 2018 at 10:20
• 2 TBO i think you should solve this in CSS only. you can nest selectors. no jquery required – Philipp Sander Commented Oct 26, 2018 at 10:21
• try element.is('.class1, .class2') – Sooriya Dasanayake Commented Oct 26, 2018 at 10:21
• 1 @NightPorter i have added an example. you can check – Death-is-the-real-truth Commented Oct 26, 2018 at 10:31

 |  Show 1 more ment

8 Answers 8

Sorted by: Reset to default 6

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 binator "~". 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./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>

use jQuery is() method

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

$(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);
    }
});

use js logic operators:

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

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-container" class="zoom-70">container</div>
<div id="marker">test</div>

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

You will have to implement multiple conditions.

.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.

do not take multiple class names separated by a 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);
            }
        });

本文标签： javascriptSet element width based on classStack Overflow