将HTML更改图像名称设置为目录名称

我有许多不同的目录，名称分别为SOMECITY-STATE。将HTML更改图像名称设置为目录名称

这些目录中的每一个都有一个相同的index.html，只有一个区别，其中每个目录的标题图像都不相同。

现在我在图像被命名为一个单独的头图像文件夹都同样喜欢SOMECITY-STATE.JPG

我想要做的是，把在HTML文件中的一些代码，使其自动读取目录名称例如NEW-YORK-NY，并使页面显示为../banners/new-york-ny.jpg，因为它是标题图片。

<div class="header-image"> <a href="#"><img src="banners/new-york-ny.jpg"></a> </div>

凡mydomain.com/directory1应显示图像../banners/directory1.jpg和mydomain.com/directory2应该显示的图像../banners/directory2.jpg

这可能吗？

来源

2016-10-29 Quimerreya

你可以用JavaScript做这个客户端，或者你可以使用服务器端（Node.js/Webpack，PHP等）来动态生成你的页面。 – Brad

我不知道如何去做。我更喜欢客户端。我怎样才能用javascript做到这一点？ – Quimerreya

谁知道......没有看到你的HTML，就不可能提供具体的答案。 – Brad

的确如此。

只是每个index.html文件中结束</body>标签之前，包括此代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
    var loc = window.location.pathname; 
    var dir = loc.substring(0, loc.lastIndexOf('/')); 
    $('.header-image img').attr('src', '../banners/' + dir + '.jpg'); 
</script>

发生了什么事？

第一行添加了jQuery库到你的网页，这使得你试图做的更容易。
接下来，我在<script>标签里面放了一些代码，所以浏览器知道它将会是Javascript。
<script>内的第一行抓取您的文件所在的文件夹，但它现在看起来像“/ new-york-ny /”。
下一行以“/ new-york-ny /”取下最后一个斜杠，所以它只是“/ new-york-ny”。
代码的最后一行选择div与header-image类中的图像，并将其src属性设置为“/ new-york-ny”，但还会添加“../banners”和“.jpg”在同一时间，使其“../banners/new-york-ny.jpg”，这是希望你想要的。

（信贷瑞安Kinal上this question一些代码）

我希望它能帮助！

来源

2016-10-29 23:50:29 SpyderScript

将HTML更改图像名称设置为目录名称

回答

相关问题