单击时所有按钮同时触发

Posted 2023-02-16

我正在尝试为"id"生成的每个视频缩略图创建一个收藏夹按钮，但每次我点击其中一个按钮时，所有这些按钮都会同时触发，所以不要获得正确的视频ID值只从视频列表中获取第一个ID。

总之，按钮种类有效，但没有得到正确的值。

我已经尝试了一些东西，但遗憾的是它们不起作用，输出相同或导致错误。

1. 我为我的按钮生成了不同的id和名称，希望它们不会同时触发。
2. 我将按钮移到生成的缩略图代码之外并应用静态值以查看是否可以获得正确的ID。

的Video.js：

$(document).ready(function() 
    var video_id    = $("input[name='video_id']").val();
    var vwidth      = 854;
    var vheight     = 520;
    var playerc     = $("#player-container");
    var width       = playerc.width();
    var height      = Math.round(width / (vwidth / vheight));
    );

$("button[id='favorite']").click(function(e) 
        e.preventDefault();

        $.ajax(
            url: base_url + '/ajax.php?s=video_favorite',
            cache: false,
            type: "POST",
            dataType: "json",
            data: video_id: video_id,
            success: function(response) 
                if (response.status == '1') 
                    $("button[id='favorite']").html(response.count);
                    $("button[id='favorite']").prop('disabled', true);
                 else 
                    $("#response-container").html(close + response.msg);
                    $("#response-container").removeClass('alert-success').addClass('alert-danger');
                    $("#response-container").show();
                
            
        );
    );

生成缩略图的代码：

 <div id="response-container" class="alert alert-dismissible" role="alert" style="display: none;"></div>
<ul class="videos<?php if ($this->related): echo ' related'; endif; if (isset($this->menu) && $this->menu == 'search'): echo ' svideos'; endif; ?>">

<input name="video_id" class="tags" type="hidden" value="<?php echo $video['video_id']; ?>" />

<?php $ids = array(); foreach ($this->matches as $index => $video_id): if (isset($this->videos[$video_id])): $video = $this->videos[$video_id]; $ids[] = $video_id; $percent = ($video['likes'] > 0 && $video['rated_by']) ? round($video['likes']*100/$video['rated_by']) : 100; ?>

<li id="video-<?php echo $video['video_id']; ?>" class="dropdown thumbnail" data-percent="<?php echo $percent; ?>" data-likes="<?php echo $video['likes']; ?>" data-rated="<?php echo $video['rated_by']; ?>">

<a href="<?php echo url($video['video_id'], $video['url'], $video['slug']); ?>" target="_blank" class="video" title="<?php echo e($video['title']); ?>">

<button id="favorite" class="btn btn-default btn-mb" data-toggle="tooltip" data-placement="top" title="<?php echo __('favorite-help'); ?>"><span class="glyphicon glyphicon-heart"></span></button>

    </a>
     </li>
   <?php endif; endforeach; p('ctr', $ids); ?>
</ul>               

我的目标是只需单击一个按钮，而不是同时触发它们，并将正确的id输入到我输入的值中。

答案

将id改为class为class="favorite"并试试这个

$("button[class='favorite']").click(function(e) 
    e.preventDefault();
    var video_id = $(this).closest('li');//video id here
    $.ajax(
        url: base_url + '/ajax.php?s=video_favorite',
        cache: false,
        type: "POST",
        dataType: "json",
        data: video_id: video_id,
        success: function(response) 
            if (response.status == '1') 
                $(this).html(response.count);
                $(this).prop('disabled', true);
             else 
                $("#response-container").html(close + response.msg);
                $("#response-container").removeClass('alert-success').addClass('alert-danger');
                $("#response-container").show();
            
        
    );
);

我使用了this关键字，它指定了触发事件的相同元素