重复元素的 onclick 事件仅适用于第一行

Question

您将在下面找到我用来从表格中提取数据的代码以及我想要重复的图像，其中每个表格行列在最后一个按钮标签 Class=plusbtn 中

{

        $event .= '     <div  style="border-bottom:1px solid gray;padding:2px;width:100%;float:left;"><div id="eventslist" onclick="goevent('.$row['id'].');">
                        <div style="width:100%;float:left;">
                            <h4 style="margin:0;"><span id="eventuser" style="width:50%;float:left;text-align:left;font-size:14px;"><img src="https:///login/profile/'.$row['profile_img1'].'" style="width:35px;height:37px;border-radius:20px;margin-left:-4%;background:url(http:///img/person-placeholder.jpg) no-repeat center" class="img-rounded"> <b>'.$row['user'].'</b></span><span style="float:right;text-align:right;font-size:12px;margin-top:9px;margin-right:-25px;">Posted: '.$row['stdate'].'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br/><br/><b><span style="font-size:20px;float:left;">'.$row['fname'].'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></b></h4>
                        </div>
                        <div style="width:109%;float:left;">
                            <img src="http:///login/image/'.$row['name'].'" style="width:100%;height:35%;border-radius:10px;margin-left:-4%;background:url(https:///img/load.gif) no-repeat white" class="img-rounded">
                        </div>
                        <div style="width:100%;float:left;">
                            <p style="margin-bottom:0;">'.substr($row['description'],0,110).'...</p>
                        </div>
                </div><div><button class="plusbtn" onclick="plusrate(\''.$likecount.'\');"><a onclick="document.getElementById(`myImage`).src=`https:///img/fav4.png`"><img id="myImage" src="https:///img/fav3.png" style="opacity: 0.7;height:25px;max-width:100px"></a></button><span id="likeqnty" class="likeqnty">0</span> <b>Likes</b></div></div>   ';
    }

使用此设置，每个条目都会出现按钮图像，但我只能在页面上的第一个条目处单击按钮。当我在按钮周围键入回声时（回声“按钮”）出现在页面上

如何使按钮在每个表格条目中重复并正确从 fav4 切换到 fav3。

Answer 1

您的问题在于 ID 应该是唯一的。但是您所有的图片都有相同的 ID。

<a onclick="document.getElementById(`myImage`).src=`https:///img/fav4.png`">
    <img id="myImage" src="https:///img/fav3.png" style="opacity:0.7;height:25px;max-width:100px">
</a>

点击这些链接中的任何一个都会更改 ID 为 myImage 的第一张图片。

您想更改您的 onclick javascript 以将图像分别定位到当前点击目标。

<a onclick="this.getElementsByTagName(`img`)[0].src=`https:///img/fav4.png`">
    <img id="myImage" src="https:///img/fav3.png" style="opacity:0.7;height:25px;max-width:100px">
</a>

在这段代码中，我们使用 this，因为它是接收到点击的当前 DOM 元素。并检索其中的图像，并更改其 src 值。这可确保目标图像与用户单击的位置相关。