代码之家 › 专栏 › 技术社区 › NightPorter

基于类设置元素宽度

css html jquery javascript

NightPorter · 技术社区 · 7 年前

我正在尝试使用jQuery根据独立div的类来设置图像的宽度。我想我需要一个 if 但它不起作用。

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

8 回复 | 直到 7 年前

gavgrif 7 年前

如果#标记是

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

如果#标记是对于#map container,您仍然不需要jquery—只需使用css并通过 一般同族组合子 " ". 首先设置基大小,然后根据同级类设置大小。

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

switch语句 总比多个if语句好。

请注意,可以将多个语句阻塞在一起,如果前面的语句的计算结果都不是true,则会出现默认语句。

下面的代码片段演示了不同的switch语句;

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>

Ercan Peker 7 年前

使用jQuery is()

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

Nattamai Jawaharlal Manikandan 7 年前

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

pandamakes 7 年前

使用js逻辑运算符:

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

Mark Baijens 7 年前

正如其他人所言,您可以根据您的html通过css来实现这一点。但是如果出于某种原因您想使用jQuery,您可以为每个类使用or。

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>

Karan Verma 7 年前

hasClass()只使用一个参数。你可以在上面找到它 JQuery official doc .

您必须实现多个条件。

Daniel Sixl 7 年前

.hasClass 只接受一个参数来检查单个类。另一种方法是使用 jQuery is function .

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

LDS 7 年前

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