Question

我正在尝试使用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);
  }
});

Answer 1

如果#marker是＃map-container的子，则不需要jquery-只需使用css并相应地将div作为目标即可。首先设置基本尺寸，然后根据父类设置尺寸。

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

如果#marker是＃map-container的兄弟姐妹，您仍然不需要jquery-只需使用css并通过常规兄弟姐妹组合器定位div “ 〜”。首先设置基本大小，然后根据兄弟姐妹类设置大小。

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

如果绝对要肯定要使用jquery，则可以使用 switch语句，它总是比多个if语句更好。

请注意，可以将多个语句一起阻塞，然后，如果前面的语句都不为真，则默认语句会出现。

以下代码段演示了不同的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>

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

使用js逻辑运算符：

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

Answer 5

正如其他人所提到的，您可以通过css来实现，具体取决于您的html。但是，如果由于某种原因要使用jQuery，可以对每个类使用或来实现。

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（）仅使用一个参数。您可以在JQuery official doc上找到它。

您将必须实现多个条件。

Answer 7

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

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

在这里使用jQuery没有太大的意义。如果没有在示例中未提及的特殊原因，CSS会更有意义。

Answer 8

在has calss方法中不要用逗号分隔多个类名。解决方案是以下代码

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

根据类别设置元素宽度

8 个答案: