重複元素的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> 

在這段代碼中，我們使用它，因爲它是當前接收到點擊的DOM元素。並檢索其中的圖像，並更改其src值。這確保了目標圖像與用戶點擊的位置相關。