如何将 .click 限制为第一个图像以避免获取存储在容器中的所有图像

How to restrict .click to first image to avoid fetching all images stored in container

本文关键字：图像 存储 获取 click 第一个      更新时间：2023-09-26

目前我有多个图像返回到此div中(按预期工作(。

<div class="go" id="container"></div>

然后，此代码允许用户单击其中一个图像，并将其加载到模式弹出窗口中。这有效，但不是捕获一个图像，而是获取返回到容器的每个图像。

如何让它只拍摄点击的第一张图像？ 还是停止拍摄多张图像？

                $(document).ready(function () {
                    $('.go').css('cursor', 'pointer');
                    $('.go').click(function (e) { // Button which will activate our modal
                        $(this).width(100).height(100).appendTo('#badgeselect');
                        $('#modal').reveal({ // The item which will be opened with reveal
                            animation: 'fade', // fade, fadeAndPop, none
                            animationspeed: 600, // how fast animtions are
                            closeonbackgroundclick: true, // if you click background will modal close?
                            dismissmodalclass: 'close' // the class of a button or element that will close an open modal
                        });
                        return false;
                    });
                });

这就是捕获图像的方式。

                       _.each(friends, function (item) {
                            // using a wrapper so the user can click the pic or the name
                            var wrapper = $('<div class="wrapper" data-friend-request-id="' + item.friendRequestId + '"></div>');
                            wrapper.append('<img class="images" src="' + item.imageURL + '" />');
                            wrapper.append('<div>' + item.username + '</div>');
                            $('#container').append(wrapper);
                        });

这是弹出框

 <!---Pop up box with info about the badge and options for user to complete-->
            <div id="modal">
                <div id="heading">
                    Award your friend this badge!?
                </div>
                <div id="content_pb">
                    <div id="badgeselect">
                    </div>
                    <p>This will be text that describes the badge
                        <br>and the reason for awarding it</p>
                    <form action="#" method="get">
                        <input type="text" placeholder="Select friend" id="username" required/>
                        <input type="text" placeholder="Add comment" id="email" required/>
                        <br>
                        <br>
                    </form>
                    <a id="send" class="button green close">
                        <img src="images/tick.png">Yes, do it now!</a>
                    <a href="http://kudosoo.com/JQUERYYTEST/dannyboy.html" class="button red close">
                        <img src="images/cross.png">No, Iâm insane!</a>
                    <br>
                    <br>
                </div>
            </div>
您必须在特定

图像('.go img').click而不是图像容器('.go').click上提交单击事件，因此它不会加载整个容器 html 或图像，而是将单个图像元素加载到模态弹出框中。

$(document).ready(function () {
$('.go img').css('cursor', 'pointer');
$('.go').on('click','img',function (e) {
 $(this).width(100).height(100).appendTo('#badgeselect');
  $('#modal').reveal({
    animation: 'fade',
    animationspeed: 600,
    closeonbackgroundclick: true,
    dismissmodalclass: 'close'
   });
  return false;
});
});

如果你只想定位图像集中的第一个图像，你可以在jquery中使用.first()。

而不是这一行

 $('.go').click(function (e) {

像下面这样使用。它将仅针对容器下列出的第一个图像。

 $('.go img').first().click(function (e) {

解释功能的简单演示

我可能理解不正确，你只需要一张图片来响应"点击"事件吗？

在这里，您将事件绑定到div.go这是一组图像元素的容器，此div或其后代都可以由于事件气泡而触发事件。检查此 jQuery 文档以了解事件处理程序，尤其是直接和委托事件部分

如果选择器被省略或为 null，则事件处理程序称为直接绑定或直接绑定。每次选定元素上发生事件时都会调用处理程序， 无论是直接出现在元素上还是来自后代(内部(元素的气泡。

在这里，您的情况是"直接的"，您将div.go与click事件直接绑定。因此，单击任何图像也会触发弹出窗口。

如果您只想影响一个图像，一种方法就是将事件直接绑定到此特定图像元素。希望这对您有所帮助。

相关文章：