如何在 EJS 的 for 循环中操作特定的 div？

Question

我在谷歌上搜索了好几个小时，我想在 onClick 事件期间更改一个元素的 svg 颜色，结果它要么为 for 循环中的所有元素设置样式，要么只为第一个元素设置样式。我在这里添加了我的 ejs 和 toggleSvg() js 脚本。希望你能帮助我。

ejs 片段：（在这里寻找“svg”）

<div class="max-w-5xl mt-14 mx-auto sm:max">
          <% posts.forEach(post=> { %>
            <div class="my-20">
                <div class=" px-2 mb-2 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="border border-gray-300 p-1 rounded-full w-10 h-10 flex items-center bg-white">
                            <img
                            src="<%= post.merchant.image %>"
                            alt="..."
                            class="w-10"
                            loading="lazy"
                                />
                        </div>
                        
                        <p class="pl-5"><%= post.merchant.name %></p>
                    </div>
                    <div>
<!--svg here!-->
                            <svg id="test" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" onclick="toggleSvg()" >
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
                              </svg>
                    </div>
                </div>
                <!--image carousell-->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide w-10 h-20 bg-black ">
                            <div class="justify-center flex ">
                                <img
                                src="<%= post.imageUrl[0] %>"
                                alt="..."
                                class="h-72"
                                loading="lazy"
                              />
                            </div>
                        </div>
                        <div class="swiper-slide bg-black">
                            <div class="justify-center flex  bg-black">
                                <img
                                src="<%= post.imageUrl[1] %>"
                                alt="..."
                                class="h-72"
                                loading="lazy"
                              />
                            </div>
                        </div>
                        <div class="swiper-slide bg-black">
                            <div class="justify-center flex bg-black">
                                <img
                                src="<%= post.imageUrl[2] %>"
                                alt="..."
                                class="h-72"
                                loading="lazy"
                              />
                            </div>
                        </div>
                        <div class="swiper-slide bg-black">
                            <div class="justify-center flex bg-black">
                                <img
                                src="<%= post.imageUrl[3] %>"
                                alt="..."
                                class="h-72"
                                loading="lazy"
                              />
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>
                
                <div class="">
                    <p><span class="font-bold pr-3"><%= post.merchant.name %></span><%= post.description %></p>
                </div>
              </div>
          <% }) %>
      </div>`enter code here`

toggleSvg() js:

<script>
        function toggleSvg() {
            svgElem = document.getElementById("test");
            if(svgElem.style.fill === 'red'){
                svgElem.style.fill = 'none';
            }else{
                svgElem.style.fill = 'red';
            }
        }
</script>

Answer 1

您正在循环使用 id 只能 select 一个元素，如果你想为所有 svg 着色，你可以使用 class，如果你想为特定 svg 着色，你可以这样做

onclick="toggleSvg(this)"

这样你在点击时传递当前元素

<script>
        function toggleSvg(svgElem ) {
            if(svgElem.style.fill === 'red'){
                svgElem.style.fill = 'none';
            }else{
                svgElem.style.fill = 'red';
            }
        }
</script>

如何在 EJS 的 for 循环中操作特定的 div？

How to manipulate specific div inside a for-loop of EJS?

svg

for-loop

ejs