javascript — событие onclick повторяющихся элементов работает только для первой строки
Ниже вы найдете мой код, который я использую для извлечения данных из таблицы вместе с изображением, которое я хочу повторить для каждой строки таблицы, указанной в последнем теге кнопки 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'].' </span><br/><br/><b><span style="font-size:20px;float:left;">'.$row['fname'].' </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.
Решение
Ваша проблема заключается в том, что идентификаторы должны быть уникальными. Но все ваши изображения имеют одинаковый идентификатор.
<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>
Нажатие на любую из этих ссылок всегда изменит ПЕРВОЕ изображение с идентификатором myImage,
Вы хотели бы изменить свой javascript onclick, чтобы нацелить изображение соответственно на текущую цель клика.
<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. Это гарантирует, что целевое изображение относительно того места, где пользователь нажал.
Другие решения
Других решений пока нет …
detector