Question

我正在使用play framework 2.0。我通过迭代User对象的列表（List）来显示scala模板中显示的项目列表。每个用户对象都以div的形式显示为

<div class="columns"><code>
@for(list of Users) {
   <div class="column"> 
    <a class="popup-link" href="#drabbles-box">@user.TITLE</a></div>
 }
</div>

单击该标题后，弹出窗口将以

打开

<div class="popup-box-hover" style="display: none">
<div class="popup">
     @user.getImage() //HELP NEEDED HERE
</div>

以下是jQuery代码：
$(".popup-link").fancybox({ zoomSpeedIn : 0, zoomSpeedOut : 0, frameWidth : 670, imageScale : false, hideOnContentClick : false, overlayOpacity : 0.6 });



        $(".popup-link").click(

                function() {

                    //alert(' ' + $("#currentDrabble").val())

                    if ($(this).parents().is('.box')) {
                        cur_title = $(this).parents('.box').find(
                                '.title-for-form').text();
                    }

                    return true;
                });

        $("#header .popup-link").click(function() {
            $('#chal').val($('#chal').attr('title'));
        })

        $(".part-chal").click(function() {
            $('#chal').val(cur_title);
            return true;
        });

$(".popup-link").click( function() { //alert(' ' + $("#currentDrabble").val()) if ($(this).parents().is('.box')) { cur_title = $(this).parents('.box').find( '.title-for-form').text(); } return true; }); $("#header .popup-link").click(function() { $('#chal').val($('#chal').attr('title')); }) $(".part-chal").click(function() { $('#chal').val(cur_title); return true; });

我需要将用户对象传递给jQuery弹出窗口。我不知道如何在点击链接时传递PARTICULAR对象以显示该图像。我不知道所有的jQuery，所以我找不到弹出窗口的位置。

请帮忙。

Answer 1

问题在于，当你在JS方面时，你将无法访问用户列表......

因此，如果您需要弹出窗口包含与所点击的项目相关的各种内容。你能做的是（我说的快速而肮脏的方式）： 1 /对于触发弹出窗口的项目（通过点击），您必须添加一个特定属性来保存要显示的内容（我猜测@user.getImage会返回图像的网址）=＆gt;查看属性data-content（我们将使用$.data）

<a class="popup-link" data-content="@user.getImage()" href="#drabbles-box">@user.TITLE</a></div>

2 /当触发弹出窗口时，您现在可以轻松更改内容，如此

$(".popup-link").click(function() {
   if ($(this).parents().is('.box')) {
       cur_title = $(this).parents('.box').find('.title-for-form').text();
   }
   //create the img tag
   var image = $("<img></img>")
   //give it the url to the image for the current user
   image.attr("src", $(this).data("content")) //$(this) wraps the element being clicked
   //set the content of ".popup" to be this img tag
   $(".popup").html(image)
   return true;
});

我没有尝试过，所以如果有任何问题，请发表评论，我会继续帮助更新此答案并进行更正。

HTH

在onclick事件中将自定义对象传递给jQuery弹出窗口

1 个答案: