我正在使用像instgram这样的功能来构建脚本（双击图像以触发心脏按钮） 问题是，当我在图像上单击两次时，如果您知道我的意思，那么feed上的所有帖子都会被喜欢，因为它们具有相同的按钮ID。
这是js行
/* Handler for doubleclick on the photo */
$(document.body).on('dblclick', '.post-image', function() {
$(this).parent().parent().parent().find('.like-button').trigger('click');
$(this).fadeTo('fast', 0.5).fadeTo('fast', 1.0);
});
例如，我只想添加一些过滤器来检查我单击的帖子
我正在使用data-photo-id获取照片ID，然后将其插入到对象中，然后发出ajax请求以将类似图片存储到数据库中
这是处理文件（php）：
/* Get the photo id */
$target_id = (int) $_POST['photo_id'];
/* Check if the like is set or not already */
$like_status = Database::simple_get('id', 'associations', ['first_id' => $account_user_id, 'second_id' => $target_id, 'type' => 'PHOTO', 'sub_type' => 'LIKE']);
/* Remove the like from the database */
if($like_status) {
$database->query("DELETE FROM `associations` WHERE `type` = 'PHOTO' AND `sub_type` = 'LIKE' AND `first_id` = {$account_user_id} AND `second_id` = {$target_id}");
echo 'deleted';
}
/* Insert the like in the database */
else {
/* Get the user_id of the photo owner */
$photo_user_id = Database::simple_get('user_id', 'photos', ['photo_id' => $target_id]);
$database->query("INSERT INTO `associations` (`type`, `sub_type`, `first_id`, `second_id`) VALUES ('PHOTO', 'LIKE', {$account_user_id}, {$target_id})");
if($account_user_id != $photo_user_id) {
Notifications::insert($account_user_id, $photo_user_id, 'PHOTO_LIKE', $target_id);
}
echo 'inserted';
}
HTML邮政编码：
<div class="row">
<div id="panel" class= 'we-post-panel panel'>
<!--start post header-->
<div class='we-post-header'>
<a href='profile/<?php echo $data->username; ?>'><img src='<?php echo self::display_image(AVATARS_THUMBS_ROUTE . $data->avatar); ?>'></a>
<a href='profile/<?php echo $data->username; ?>' class='user'>
<?php echo $data->username; ?></a><?php if($data->verified): ?>
<i class="fas fa-badge-check we-post-header-verified" title="<?php echo $language->profile->display->verified; ?>"></i>
<?php endif; ?>
<?php if(User::logged_in()): ?>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="far fa-ellipsis-h menu-icon"></i>
</a>
<ul class="dropdown-menu">
<li><a href="photo/<?php echo $data->photo_id; ?>" target="_blank"><i class="fa fa-link fa-fw"></i>
<span>Open in new tab</span></a>
</li>
<li role="separator" class="divider"></li>
<?php if((User::logged_in() && $data->user_id == $account->user_id)): ?>
<li>
<a class="clickable dashboard-delete" data-photo-id="<?php echo $data->photo_id; ?>"><i class="fa fa-trash fa-fw"></i>
<span>Delete</span></a>
</li>
<?php endif; ?>
<?php if((User::logged_in() && $data->user_id !== $account->user_id)): ?>
<li><a class="clickable dashboard-report" data-photo-id="<?php echo $data->photo_id; ?>"><i class="fa fa-bug fa-fw"></i>
<span>Report</span></a>
</li>
<?php endif; ?>
</ul>
<?php endif; ?>
</div>
<!--end post header-->
<div class='we-post-image post-image'>
<i class="double-click-heart-icon"></i>
<img src="<?php echo self::display_image(PHOTOS_ROUTE . $data->photo); ?>" class="we-post-image-container img-responsive animated fadeIn"/>
</div>
<div class='we-post-footer'>
<!--start post reaction-->
<div class='we-post-react'>
<i class="heart-icon clickable we-heart-icon <?php if($like_status) echo 'hearted-icon'; ?> like-button" data-photo-id="<?php echo $data->photo_id; ?>"></i>
<i class="comment-icon clickable"></i>
<?php if(User::logged_in()): ?>
<i class="repost-icon clickable dashboard-repost" data-photo-id="<?php echo $data->photo_id; ?>"></i>
<?php endif; ?>
</div>
<!--end post reaction-->
<div class="dashboard-likes" data-photo-id="<?php echo $data->photo_id; ?>">
<a class="clickable likes-color no-underline"><?php printf($language->home->display->likes, self::get_likes($data->photo_id)); ?></a>
</div>
<!--start post caption-->
<div class="we-post-caption">
<?php if(!empty($data->content)): ?>
<ul>
<h2 class="comment-display">
<a class="comment-username-style comment-username no-underline" href="profile/<?php echo $data->username; ?>"><?php echo $data->username; ?></a>
</h2>
<span><?php echo Messages::generate_emoticons(User::generate_links($data->content));?>
</span>
</ul>
<?php endif; ?>
</div>
<!--end post caption-->
<!-- start show more-->
<?php if($comments_count > $settings->comments_pagination): ?>
<div><a class="no-underline load-more-comments" data-limit="<?php echo self::$comments_limit - $settings->comments_pagination; ?>" data-previous-limit="<?php echo self::$comments_limit; ?>" data-photo-id="<?php echo $data->photo_id; ?>">
Load more comments</a>
</div>
<?php endif;?>
<!-- end show more-->
<div class="comments-container">
<?php echo Photos::display_comments($data->photo_id, ['limit' => 'LIMIT ' . ((self::$comments_limit)) . ', ' . $settings->comments_pagination, 'where' => null]); ?>
</div>
<a class="time no-underline">
<time class="time-size timeago" datetime="<?php echo date('c', $data->timestamp); ?>" title="<?php echo date('c', $data->timestamp); ?>"></time>
</a>
<div class='comment-section'>
<input id="comment" type="text" name="comment" class='we-comment dashboard-input' placeholder='Add a comment...' data-photo-id="<?php echo $data->photo_id; ?>">
<span class='dot'></span>
</div>
</div>
</div>
</div>
AJAX：
/* Like (normal post) */
$(document.body).on('click', '.button-like', function() {
/* Determine the current box */
var $container = $(this).closest('#panel');
/* Get the photo id from the input field */
var photo_id = $(this).data('photo-id');
/* Set the data into an object */
var post_data = { 'type' : 'like', 'photo_id' : photo_id }
/* Post the data */
$.post('processing/process/photo.php', post_data, function(data) {
/* Try to block out some possible spamming */
if(data == 'deleted') {
$container.find('.like-button').removeClass('hearted-icon').addClass('heart-icon');
$container.find('.dashboard-likes-count').html(parseInt($container.find('.dashboard-likes-count').html())-1);
}
else if(data == 'inserted') {
$container.find('.like-button').removeClass('heart-icon').addClass('hearted-icon');
$container.find('.dashboard-likes-count').html(parseInt($container.find('.dashboard-likes-count').html())+1);
}
});
});
答案 0 :(得分：3)
也请共享您的html代码，因为您的代码正在选择所有类似的按钮，因此必须有一种方法来选择被点击帖子的类似按钮。
$(this).parent().parent().parent().find('.like-button').trigger('click');
上面的选择器代码导致了问题。
解决方案是
$('.post-image').on('dblclick', function() {
$(this).next().find('.like-button').trigger('click');
$(this).fadeTo('fast', 0.5).fadeTo('fast', 1.0);
});
这应该有效。
在下面的小提琴中可以看到一个插图。
$('.c1').on('dblclick', function() {
$(this).next().css({'background-color': 'pink'});
});.c1, .c2, .c3 {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
.c2 {
background-color: blue;
}
.c3 {
background-color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
答案 1 :(得分：1)
尝试使用next()选择器，而不要使用Parent()
$('.post-image').on('dblclick', function() {
$(this).next().find('.like-button').trigger('click');
$(this).fadeTo('fast', 0.5).fadeTo('fast', 1.0);
});