0

我正在使用播放框架 2.0。通过迭代用户对象的列表（列表），我在 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;
        });

我需要将用户对象传递给那个 jQuery 弹出窗口。我不知道如何传递特定对象以在单击链接时显示该图像。我根本不知道 jQuery，所以我找不到调用弹出窗口的位置。

请帮忙。

4

1 回答 1

0

问题是，当您在 JS 端时，您将无法访问用户列表......

因此，如果您需要弹出窗口包含与单击项目相关的各种内容。您可以做的是（我会说一种快速而肮脏的方式）：1 /对于触发弹出窗口（通过点击）的项目，您必须添加一个特定的属性来保存要显示的内容（我猜@user.getImage返回图像的 url）=> 查看属性（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;
});

我没有尝试过，所以如果有任何问题，请发表评论，我将通过更正更新此答案来继续提供帮助。

高温高压

于 2012-06-08T08:07:46.407 回答