Prestashop 前端問題 - 如何優化我的代碼

Question

我在 Prestashop 商店中用於商品描述的代碼有問題。 重點是當我在html中添加描述到商店時，我沒有提供照片的“ALT”屬性。 我有自動執行此操作的腳本。

這是我添加到項目完整描述中的 html 代碼：

<img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">

保存更改后，瀏覽器中顯示的代碼如下所示：

<img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" alt="hearts icons vectors illustrations" width="200" height="300"><p class="alt">hearts-icons-vectors-illustrations.jpg</p>

腳本添加的代碼的第二部分用於在將鼠標懸停在照片上時顯示照片的名稱。

這就是問題所在。 關鍵是腳本添加的數據與另一個腳本添加到照片“ALT”的數據相同。 沒有“-”和“.jpg”字符。

JS和CSS個文件在主題文件夾中： “custom css”和“custom JS”

這是我在 Prestashop 商店中使用的完整代碼：

 $(".img").wrap('<div class="alt-wrap"/>'); $(".img").each(function () { $(this).after('<p class="alt">' + $(this).attr("alt") + "</p>"); }); $(document).ready(function () { $("img").each(function () { var $img = $(this); var filename = $img.attr("src"); if (typeof attr == typeof undefined || attr == false) { var altText = filename.substring( filename.lastIndexOf("/") + 1, filename.lastIndexOf(".") ); altText = altText.replace("-", " ").replace(".jpg", ""); $img.attr("alt", altText); } }); });

 .img2 { max-width: 100%; height: 100%; margin: 0; padding: 0px; column-count: max-width; background-color: white; }.img-wrap { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around; }.img { display: block; }.alt-wrap { display: block; position: relative; margin: 20px; color: whitesmoke; border: 5px solid transparent; border-image: linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5; }.alt-wrap p.alt { position: absolute; opacity: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 15px; font-size: 14px; line-height: 22px; background-color: transparent; transition: all 10ms linear; transition-delay: 300ms; text-align: center; }.alt-wrap:hover > p.alt { opacity: 1; transition-delay: 0s; text-align: center; font-weight: 900; color: white; font-size: 150%; border: 20px solid transparent; margin-left: 1%; margin-right: 1%; text-shadow: 0 0 10px black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="img2"><div class="img-wrap"><img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">

如何更改/優化上述代碼，使鼠標懸停在 cursor 后顯示的照片名稱不帶“-”和“.jpg”符號？

在 hover 上，它在我的網站上顯示“未定義”，它顯示“hearts-icons-vectors-illustrations.jpg”，我希望它不顯示“-”和“.jpg”。

Prestashop 版本 1.7.7.3。

Answer 1

它顯示未定義，這就是為什么我要通過添加 innerHTML $(".alt").html(altText.replace(/-/g, " ")); 我剛剛在您的代碼中添加了這一行，它將用空格替換所有 - 因此 output 將是您想要的“心形圖標矢量插圖”

 $(".img").wrap('<div class="alt-wrap"/>'); $(".img").each(function () { $(this).after('<p class="alt">' + $(this).attr("alt") + "</p>"); }); $(document).ready(function () { $("img").each(function () { var $img = $(this); var filename = $img.attr("src"); let text = filename if (typeof attr == typeof undefined || attr == false) { var altText = filename.substring( filename.lastIndexOf("/") + 1, filename.lastIndexOf(".") ); altText = altText.replace("-", " ").replace(".jpg", ""); $img.attr("alt", altText); // it's showing undefined that's why i am doing it by adding innerHTML $(this).next().html(altText.replace(/-/g, " ")); } }); });

 .img2 { max-width: 100%; height: 100%; margin: 0; padding: 0px; column-count: max-width; background-color: white; }.img-wrap { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around; }.img { display: block; }.alt-wrap { display: block; position: relative; margin: 20px; color: whitesmoke; border: 5px solid transparent; border-image: linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5; }.alt-wrap p.alt { position: absolute; opacity: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 15px; font-size: 14px; line-height: 22px; background-color: transparent; transition: all 10ms linear; transition-delay: 300ms; text-align: center; }.alt-wrap:hover > p.alt { opacity: 1; transition-delay: 0s; text-align: center; font-weight: 900; color: white; font-size: 150%; border: 20px solid transparent; margin-left: 1%; margin-right: 1%; text-shadow: 0 0 10px black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="img2"><div class="img-wrap"><img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">