Question

我正在尝试为"id"生成的每个视频缩略图创建一个“收藏夹”按钮，但是每次我单击其中一个按钮时，它们都会同时触发，因此无法获得正确的按钮video-id的值，我只能从视频列表中获得第一个ID。

总而言之，按钮可以工作，但不能获得正确的值。

我已经尝试了一些方法，但不幸的是它们没有用，输出相同或导致错误。

我为按钮生成了不同的ID和名称，希望它们不会同时触发。
我将按钮移到了生成的缩略图代码之外，并应用了一个静态值以查看是否能获得正确的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。

Answer 1

将id更改为class的{{1}}并试试这个

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(); } } }); });关键字，它针对触发事件指定了相同的元素

单击时，所有按钮同时触发

1 个答案: