Я получаю комментарии пользователей из таблицы mysql, используя цикл while, и хочу поместить некоторый класс условий на кнопки, указанные в комментарии div.
Каждый комментарий имеет две кнопки:
Я хочу, чтобы имя класса было активным, если пользователь уже загрузил какой-либо комментарий, поэтому в случае, если в будущем он нажмет на пальце одного и того же комментария, он изменит число подобных.
я обсуждаю эти две таблицы
Комментарии
+----+--------+---------------+---------+ | id | userid | usercom | comname | +----+--------+---------------+---------+ | 35 | 5 | check comment | 12 | | 36 | 6 | comment test | 12 | | 37 | 6 | third comment | 12 | | 38 | 5 | number four | 12 | | 39 | 7 | fifth | 13 | | 40 | 4 | 6th | 13 | | 41 | 18 | seven | 13 | +----+--------+---------------+---------+ likesordislikes
+----+-------+------+-------+ | id | vtype | uid | comid | +----+-------+------+-------+ | 1 | 0 | 5 | 35 | | 2 | 1 | 6 | 35 | | 3 | 1 | 7 | 35 | | 4 | 0 | 8 | 36 | | 5 | 1 | 5 | 36 | | 6 | 1 | 9 | 35 | | 7 | 1 | 10 | 36 | | 8 | 1 | 11 | 36 | | 9 | 1 | 20 | 35 | | 10 | 0 | 9 | 35 | | 11 | 1 | 21 | 37 | +----+-------+------+-------+
Я получаю данные из этих таблиц и повторяю это здесь …
.vbtn { display: inline-block; margin-bottom: 0; font-size: 13px; font-weight: 300; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: none!important; color: inherit; color: #06C; border: none; padding: 0!important; font: inherit; } .like.active span { display: none; } .like.active:before { font-family: FontAwesome; content: "\f164"; color: #009900; } .dislike.active span { display: none; } .dislike.active:before { font-family: FontAwesome; content: "\f165"; color: #FF0000; }
<?php // ... $sid = "18"; //session id $c_name = "12"; //article-post id $sel = "SELECT * FROM `likesordislikes` where `uid` = :sid AND `comid` = :comment"; if (isset($_POST['likes'])) { $comid = mysqli_real_escape_string($con, $_POST['comid']); try { $stmt = $DB->prepare($sel); $stmt->bindValue(":sid", $sid); $stmt->bindValue(":comment", $comid); $stmt->execute(); $fetch = $stmt->fetchAll(); if (count($fetch) == 0) { $insert = "INSERT INTO `likesordislikes` (`vtype` , `uid` , `comid`) VALUES " . "( :like, :likerid , :comment)"; $stmt = $DB->prepare($insert); $stmt->bindValue(":like", "1"); $stmt->bindValue(":likerid", $sid); $stmt->bindValue(":comment", $comid); $stmt->execute(); } elseif (count($fetch) > 0) { if ($fetch[0]["vtype"] == "1") { $delete = "DELETE FROM `likesordislikes` where `uid` = :sid AND `comid` = :commnt"; $stmt = $DB->prepare($delete); $stmt->bindValue(":sid", $sid); $stmt->bindValue(":commnt", $comid); $stmt->execute(); } elseif ($fetch[0]["vtype"] == "0") { $sql = "UPDATE `likesordislikes` SET `vtype` = '1' WHERE `uid` = :id AND `comid` = :commn"; $stmt = $DB->prepare($sql); $stmt->bindValue(":id", $sid); $stmt->bindValue(":commn", $comid); $stmt->execute(); } } } catch (Exception $ex) { echo $ex->getMessage(); } } if (isset($_POST['dislikes'])) { $comid = mysqli_real_escape_string($con, $_POST['comid']); try { $stmt = $DB->prepare($sel); $stmt->bindValue(":sid", $sid); $stmt->bindValue(":comment", $comid); $stmt->execute(); $fetch = $stmt->fetchAll(); if (count($fetch) == 0) { $insert = "INSERT INTO `likesordislikes` (`vtype` , `uid` , `comid`) VALUES " . "( :unlke, :likerid , :comment);"; $stmt = $DB->prepare($insert); $stmt->bindValue(":unlke", "0"); $stmt->bindValue(":likerid", $sid); $stmt->bindValue(":comment", $comid); $stmt->execute(); } else { if ($fetch[0]["vtype"] == "0") { $delete = "DELETE FROM `likesordislikes` where uid = :sid AND comid = :commnt"; $stmt = $DB->prepare($delete); $stmt->bindValue(":sid", $sid); $stmt->bindValue(":commnt", $comid); $stmt->execute(); } elseif ($fetch[0]["vtype"] == "1") { $sql = "UPDATE `likesordislikes` SET `vtype` = '0' WHERE `uid` = :id AND comid = :commn"; $stmt = $DB->prepare($sql); $stmt->bindValue(":id", $sid); $stmt->bindValue(":commn", $comid); $stmt->execute(); } } } catch (Exception $ex) { echo $ex->getMessage(); } } $slt = "SELECT" . " c.*," . " SUM(CASE WHEN lod.vtype=1 THEN 1 ELSE 0 END) likes," . " SUM(CASE WHEN lod.vtype=0 THEN 1 ELSE 0 END) dislikes" . " FROM" . " comments c LEFT JOIN likesordislikes lod ON lod.comid=c.id" . " WHERE" . " c.comname = '$c_name' AND c.media = '$type'" . " GROUP BY" . " c.id"; $res = mysqli_query($con, $slt); while($fetc = mysqli_fetch_array($res)) { //$select3 = "SELECT c.* FROM comments c LEFT JOIN likesordislikes lod ON c.id=lod.comid WHERE `uid` = :sid"; (It was my question code) $select3 = "SELECT vtype FROM likesordislikes WHERE comid = :commentid AND `uid` = :sid LIMIT 1"; // its the solution i got in answer try { $stmtt = $DB->prepare($select3); $stmtt->bindValue(":commentid", $fetc['id']); //update from the answer $stmtt->bindValue(":sid", $sid); $stmtt->execute(); $vfetch = $stmtt->fetchAll(); if (count($vfetch) == 0) { $likeclass = ""; $dislikeclass = ""; } elseif (count($vfetch) > 0) { if ($vfetch[0]["vtype"] == "1") { $likeclass = "active"; $dislikeclass = ""; } elseif ($vfetch[0]["vtype"] == "0") { $likeclass = ""; $dislikeclass = "active"; } } } catch (Exception $ex) { echo $ex->getMessage(); } ?> <div class="container1"> <div class="div-right-mid"> <span class="comment-text"> <?php echo $fetc['usercom'] ?> </span> </div> <div id="rating-votes"> <button class="vbtn like <?php echo $likeclass; ?>" value="<?php echo $comid ?>"> <span> <i class="fa fa-thumbs-o-up" aria-hidden="true"> </i> </span> </button> <span class="likes"> <font color="#6d7371"> <?php echo $fetc['likes']; ?> </font> </span> <button class="vbtn dislike <?php echo $dislikeclass; ?>" value="<?php echo $comid ?>"> <span> <i class="fa fa-thumbs-o-down" aria-hidden="true"> </i> </span> </button> <span class="dislikes"> <font color="#6d7371"> <?php echo $fetc['dislikes']; ?> </font> </span> </div> </div> <?php } ?>
Обновить js
<script type="text/javascript"> $('.rating-votes').likeDislike({ reverseMode: true, click: function (value, l, d, event) { var likes = $(this.element).find('.likes'); var dislikes = $(this.element).find('.dislikes'); var comid = $(".vbtn").val(); var data = {comid:comid}; if(value === 1){ data.likes = true; }else{ data.dislikes = true; } $.ajax({ url: '', type: 'POST', data: data, success: function (data) { likes.text(parseInt(likes.text()) + l); dislikes.text(parseInt(dislikes.text()) + d); } }); } }); </script> <script src="like-dislike.js"></script>
Этот php-код не дает мне требуемого результата.
Я столкнулся с тремя проблемами …
Когда пользователь имеет thumbed-up комментарий, что кнопка большого пальца вверх не показывает активный класс (Solved)
Только нажатие 1-го комментария / thumb-down 1-го комментария работает над нажатием кнопки 2-го, а все остальные кнопки комментариев не работают над щелчком (разрешено)
Ajax-вызов не отправляет данные в php (Edited)
CSS показывает, что происходит с активным классом кнопки с надписью «thumbed up / thumbed down» для любого конкретного комментария, зарегистрированного пользователем
Для вашего первого вопроса
Есть пара проблем:
$select3 не $select3 столбцы из таблицы likesordislikes (в соответствии с вашим кодом вам нужен столбец vtype ), он приводит только c.* (Это все поля из таблицы comments ). Вероятно, поэтому вам пришлось пойти с try...catch , потому что он не сможет найти индекс vtype . Таким образом, строка кода должна измениться на:
$select3 = "SELECT c.*,lod.vtype FROM comments c LEFT JOIN likesordislikes lod ON c.id=lod.comid WHERE `uid` = :sid";
$select3 всегда получает все записи comments , даже если пользователь не взаимодействует с этими комментариями (потому что вы используете LEFT JOIN ), а затем каждый раз выбираете первый (индекс 0 ). Так как вы действительно не используете информацию из comments таблицы (нет необходимости в JOIN ), и теоретически должна быть одна запись для каждого пользователя и комментарий, я бы изменил эту строку на:
$select3 = "SELECT vtype FROM likesordislikes WHERE comid = :commentid AND `uid` = :sid LIMIT 1";
И тогда, конечно, свяжите идентификатор комментария:
$stmtt->bindValue(":commentid", $fetc['id']);
Для вашего второго вопроса
Вы печатаете <div id="rating-votes"> несколько раз, что неверно по HTML. Атрибут id должен быть уникальным на всей странице, если у вас есть два, такие вызовы, как $('#id') , всегда будут давать вам один элемент, первый. Поэтому вы должны изменить HTML-код внутри while чтобы использовать class вместо id , например:
<!-- --> <div class="rating-votes"> <button class="vbtn like <?php echo $likeclass; ?>" value="<?php echo $comid ?>" class="vote"> <!-- --> </button> <!-- --> <button class="vbtn dislike <?php echo $dislikeclass; ?>" value="<?php echo $comid ?>" class="vote"> <!-- --> </button> <!-- --> </div> <!-- -->
Затем вы должны изменить свои Javascript-вызовы, чтобы они находили по class вместо id , например:
$('.rating-votes').likeDislike({ //.likeDislike function defined in like-dislike.js // ... click: function(value, l, d, event) { // ... var comid = $(this.element).find('.vote').val(); // ... } });
Для вашего третьего вопроса
Данные не поступают так, как вы ожидаете, вероятно, потому, что вам не хватает амперсанда ( & ), кода, который у вас есть:
data: 'likes=' + likes + '&dislikes=' + dislikes + 'comid=' + comid,
переведет на что-то вроде:
data: 'likes=1&dislikes=2comid=3,
Поэтому вы должны изменить его на:
data: 'likes=' + likes + '&dislikes=' + dislikes + '&comid=' + comid,
Хотя я бы рекомендовал вам использовать объект, а не конкатенировать значения самостоятельно, таким образом, jQuery будет обрабатывать все странные вещи для вас. Чтобы сделать это, измените эту строку на:
data:{ likes:likes, dislikes:dislikes, comid:comid }Неdata:{ likes:likes, dislikes:dislikes, comid:comid }
Другая проблема, с которой вы столкнулись, заключается в том, что вы отправляете объекты, а не значения объектов, поэтому вместо:
data:{ likes:likes, dislikes:dislikes, comid:comid }Неdata:{ likes:likes, dislikes:dislikes, comid:comid }
Вы должны иметь:
data:{ likes:likes.val(), dislikes:dislikes.val(), comid:comid }
Предыдущий не был действительно проблемой, мой плохой. Вы даже не должны отправлять значения, поскольку вы используете их только как флагов в PHP, поэтому вместо этого вы должны использовать что-то вроде:
data:{ likes:true, comid:comid }
Другая проблема заключается в том, что ваш PHP-код получает как likes и dislikes (например, пользователь ударил оба). Поскольку это не должно быть возможным, я бы изменил PHP, if тогда, if , if тогда else if , вот так:
if (isset($_POST['likes'])) { // ... }else if (isset($_POST['dislikes'])) { // ... }
Имейте в виду, вы по-прежнему отправляете оба сигнала, поэтому таким образом вы всегда будете выполнять первое, if . Поэтому вы должны изменить свой Javascript, чтобы он посылал только один из двух сигналов. Я действительно не знаю, как работает likeDislike , но ваш код должен выглядеть примерно так:
// ... var data = { comid:comid }; if(theUserLikesIt){ data.likes = true; }else{ data.dislikes = true; } $.ajax({ // ... data: data, // ... });