从文件夹中的文件生成，并将css样式应用于img或容器（基于文件名）–（Javascript/JQuery/PHP？）

是否可以将CSS类应用于 当文件名中存在一个CSS类时，是否可以将现有的CSS类分配给或其父类

补充这个想法 不仅可以像那样自动应用样式，而且可以创建整个标记吗？理想情况下，我会有不同的“项目”页面，在这些页面上我会链接一个图像文件夹，即images/project-1到一个文件夹

是否可以使用Javascript在父容器中创建后续结构？或者这一定是某种PHP输入吗

说你会的

A、B、C只是用来表示类样式，而不是序列。每个img或div都可以通过这种方式自动设置样式，作为一种轻内容管理系统，因此可能只有三种css类样式a、B、C，但它们将在不同的多个图像/div上重复使用多次

---

这只是我的一个想法，我很好奇是否有人对此有任何想法。

您可以使用选择器选择元素

const image123=document.querySelectordiv img:nth-of-type1 const image456=document.querySelectordiv img:nth-of-type2 const image789=document.querySelectordiv img:nth-of-type3 //或 const image1123=document.querySelectordiv.children[0] const image1456=document.querySelectordiv.children[1] const image1789=document.querySelectordiv.children[2] //image123.style=//在此处修改 //image123.className//应用的所有类 .A级{ 宽度：200px； } .B级{ 宽度：400px； } .C级{ 宽度：600px； } 如果希望通过元素的src属性获取元素，可以尝试document.querySelector或document.queryselectoral

querySelectorAll'img[src='your_filename']'；

---

使用JavaScript非常简单：

.class-for-A {
   width:200px;
}
.class-for-B {
   width:400px;
}
.class-for-C {
   width:600px;
}

<div id="image-container">    
<!--(this section to be created automatically, and apply styles subsequently based on file name end)-->
   <div>
      <img src="img-filename-123-B.jpg"/>
   </div>
   <div>
      <img src="img-filename-456-B.jpg"/>
   </div>
   <div>
      <img src="img-filename-789-C.jpg"/>
   </div>
   <div>
      <img src="img-filename-789-A.jpg"/>
   </div>

试试这个

const imgs = document.getElementsByTagName('img');
for(const img of imgs) {
    var name = img.src.substring(0, img.src.lastIndexOf('.'));
    if(name.endsWith('A')) {
        img.class = 'class-for-A';
        // or to apply class to parent element:
        img.parentElement.class = 'some-class'
    }
}

---

虽然没有那么干净，但很管用。

谢谢你回答我的问题。这是一个很大的帮助。 我在今天早些时候修改了我的问题，以包括扩展功能。但我可能已经找到了解决办法

问题: 能否使用Javascript在父容器中基于单个文件夹中包含的所有图像创建后续结构

找到答案：

---

关于第二个问题：当然，也许你应该使用jquery使事情变得更简单。对你来说，Mohammad，这听起来确实很好。如果多个图像以“A”结尾，这是否也有效？我看到了一些答案，这让我意识到我忘记了问题的这一部分，我知道这很关键。我已经相应地更新了问题。@是的，它也适用于该场景。我想您需要了解更多有关编程的一般知识！：谢谢你的回复。我很想，但我实际上只是一个编码爱好者，所以对我来说，主要是通过阅读别人的问题/答案来学习。这是我第一次想到自己发布一个问题，因为我发现这个问题很难用谷歌搜索。真的很感谢你的帮助：-我会继续尝试你的方法，不久的将来我第一次尝试确定我的想法是否可行。@Frederico，这肯定是有道理的。我要试一试。非常感谢！

const images = document.querySelectorAll("img");

for (let image of images) {
  if (image.getAttribute("src").indexOf("A.jpg") !== -1) {
    image.setAttribute("class", "class-for-A");
  } else if (image.getAttribute("src").indexOf("B") !== -1) {
    image.setAttribute("class", "class-for-B");
  } else {
    image.setAttribute("class", "class-for-C");
  }
}