0

我正在创建一个页面，其中多个链接将打开一个facebox（灯箱样式 div）。

对于#artworks-coldiv 内页面上的链接，我希望强制以 800px 宽度打开 facebox；对于所有其他人，我只希望它使用其默认计算。

将它放在页面上会强制所有链接将其打开为 800px 宽：

<script type="text/javascript">
  $(document).bind('beforeReveal.facebox', function() { $('#facebox .content').css('width', '800'); });
</script>

但是经过多次尝试使其仅适用于 中的链接后#artworks-col，我仍然只能将其应用于全部或不适用。有没有办法过滤此绑定事件以特定于该链接子集？

我认为能够做到这一点的唯一方法是使用设置一个临时标志$("a#artworks-col").click(var flag = true);并在文档范围的绑定事件中检查该标志（并在运行宽度修改后在绑定事件中清除它）但这似乎真的混乱，而且肯定有更好的方法来解决这个问题。

这是此页面的 RoR 视图（请注意，一旦运行，脚本将被移至外部文件，现在将其全部放在一个位置更容易）：

<div id="admin_logo">
    <%= image_tag("logo_admin.png", alt: "Administration") %>
</div>
<div id="artworks-col"><%= render partial: "artworks_list" %></div>
<div id="artists-col"><%= render partial: "artists_list" %></div>
<div id="locations-col"><%= render partial: "locations_list" %></div>
<div id="insurers-col"><%= render partial: "insurers_list" %></div>
<div id="users-col"><%= render partial: "users_list" %></div>

<div id="show-object" style="display:none;"></div>

<script type="text/javascript">
  $(document).bind('beforeReveal.facebox', function() { $('#facebox .content').css('width', '800'); });
</script>

上面 erb 代码中的渲染部分只是<a href>为数据库中该类型的所有对象添加一个列表。这些链接是我想要应用此功能的链接。

编辑

由于我无法按照我的意愿通过 jQuery 实现此功能，因此我将使用 CSS 来定义一个宽度为 800px 的 div，以便在单击这些特定链接时显示。我更喜欢通过 jQuery 来做到这一点，因为它会在其他需要更动态方法的情况下使用，但现在必须这样做。

4

3 回答 3

1

编辑：工作答案

我在这里上传了示例的工作版本：http: //fluidev.com/stack/fbox/test.html

这就是您将如何绑定单独的单击事件并为每个事件实现不同的宽度。通过使用回调函数（在初始调用函数完成后运行的函数），我们可以实现不同设置宽度的错觉，即使它发生在 facebox 加载之后。最酷的是，您甚至可以根据需要使用动画和其他东西来更改宽度！

$(document).ready(function() {
        $("#artworks-col").bind("click", function() {
            $.facebox({ div: '#artworks-col' }, function() { $('#facebox .content').css('width', '800px'); } ); 
        });
        $("#artists-col").bind("click", function() {
            $.facebox({ div: '#artists-col' }, function() { $('#facebox .content').css('width', '200px'); } ); 
        });
    });
于 2012-10-10T02:09:30.817 回答
0

在没有看到更多标记的情况下，我只能假设您的意思是这样的：

$(document).bind('beforeReveal.facebox', function () {
    $('#facebox .content').css('width', 'auto');
});
$('div#artworks-col a').click(function (e) {
    $('#facebox .content').css('width', '800px');
});
//Try doing this instead, but I suspect links outside $('div#artworks-col a')
//will also set the width to 800px...
$('#facebox .content').bind('beforeReveal.facebox', function () {
    $('#facebox .content').css('width', '800px');
});
于 2012-10-10T02:03:56.517 回答
0

试试这个.. 使用 jQuery 1.7 及更高版本中可用的 .on() ..

$(document).on('beforeReveal.facebox','#artworks-col', function() { 

              $('#facebox .content').css('width', '800'); 
 });

看起来您的页面中有多个具有相同 id 的元素。尝试改用一个类。

于 2012-10-10T02:04:16.713 回答