如果图像具有该类，则添加类

Question

我有一些图像，当我将它们包含在较小的菜单中时，它们太大了，这就是为什么我创建了一个第二个类别，在其中改变了宽度和高度。

我尝试使用JavaScript添加和删除类，例如：

    if ($('img').hasClass('lorem')) {
        $('img').removeClass('lorem')
        $('img').addClass('smalllorem')
    } else {
        $('img').addClass('lorem')
        $('img').removeClass('smalllorem')
    }

现在这个代码可以完美运行，但是它将会把这个类添加到我网站上的其他图片中，如何指定只给那些有 "lorem" 类的元素添加 "smalllorem" 类？因为其他的图片没有 "lorem" 类，所以它们仍然会被添加 "smalllorem" 类。

-> 我不明白为什么没有 "lorem" 类的图片也会出现在代码中？我的意思是，我询问图片是否有特定的类名.. 为什么其他的图片元素被包含了进来？

- nanchalantflow

---

你正在调用所有 img 元素，并且如果 img 没有类 lorem，则 else 语句将始终运行。 - pilchard

是的，正如@pilchard所说，是你的else语句导致了问题。只需省略它即可。 - Simp4Code

我认为你的问题不应该用JS来解决。在处理样式问题时，请使用CSS，而不是JS。 - Roko C. Buljan

@Simp4Code 我想再次添加 attention，因为我希望在点击按钮时图片再次变大。 - nanchalantflow

即使我删除else语句，它仍会将类添加到其他图像中。 - nanchalantflow

Answer 1

在尝试JavaScript之前，我建议您寻找CSS解决方案。但回答所提出的问题...

我不明白为什么没有“lorem”类的图像会进入代码？我的意思是如果img有类

因为$("img")选择所有图像，但$("img").hasClass("lorem")只查看第一个图像是否具有该类。然后，在您的if/else的每个分支中，您都将更改应用于所有图像（$("img").addClass("lorem");）。jQuery的API在这方面是不对称的：告诉您有关元素的方法只查看jQuery集合中的第一个元素，但更改某些内容的方法将应用于集合中的所有元素。

如果我理解正确，您想要：

• 将图片中的lorem替换为smalllorem

  并且

• 将图片中的smalllorem替换为lorem

基本上，您想要切换这两个类。有一个toggleClass方法可以实现。

$("img.lorem, img.smalllorem").toggleClass("lorem smalllorem");

这会选择所有具有任一类的img元素，并在它们上面切换类。

实时示例：

setTimeout(() => {
    $("img.lorem, img.smalllorem").toggleClass("lorem smalllorem");
}, 800);

.lorem {
    border: 2px solid black;
}

.smalllorem {
    border: 2px solid yellow;
}

<div>lorem (black border) => smalllorem (yellow border):</div>
<img class="lorem" src="https://via.placeholder.com/50.png/09f/fff">
<img class="lorem" src="https://via.placeholder.com/50.png/09f/fff">
<img class="lorem" src="https://via.placeholder.com/50.png/09f/fff">

<div>smalllorem (yellow border) => lorem (black border):</div>
<img class="smalllorem" src="https://via.placeholder.com/50.png/09f/fff">
<img class="smalllorem" src="https://via.placeholder.com/50.png/09f/fff">
<img class="smalllorem" src="https://via.placeholder.com/50.png/09f/fff">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- T.J. Crowder

Answer 2

你可以使图片具有响应性，而不是给它添加一个新类：

.img {
  width: 100%;      //define width
  max-width: 250px; //restrict the size (can use min-width aswell)
  height: auto;     //auto adjust depending on the width
}

var count = 0;
function resize(){
var menue = document.getElementById("container");
count++;
if(count % 2)
{
menue.style.width = "50%";
menue.style.height = "50px";
}
else
{
menue.style.width = "100%";
menue.style.height = "100px";
}
}

#container{
border: 1px solid black;
width: 100%;
height: 100px;
transition: 330ms;
}
#home{
width: 15%;
height: auto;
min-width:10px;
}

menue
<div id="container">
<img src="https://cdn-icons-png.flaticon.com/512/25/25694.png" id="home">
</div>
<br>
<input type="button" value="resize menue" onclick="resize()">

- hugomztl

---

这也是一个非常好的答案，唯一阻止我使用它的是，当我选择较小的菜单时，对象之间的空间变大了。我猜没有max-right选项。现在我有“right: 20%;”。 - nanchalantflow