已编辑：正在解答

Question

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

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

将其放在页面上会强制所有链接以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这样做，因为它将用于需要更动态方法的其他情况，但现在必须这样做。

Answer 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'); } ); 
        });
    });

Answer 2

如果没有看到更多的标记，我只能假设你的意思是这样：

$(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');
});

Answer 3

试试这个..使用jQuery 1.7及以上版本中提供的.on（）..

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

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

您的网页中似乎有多个具有相同ID的元素。请尝试使用类而不是..

jQuery $（document）.bind仅在单击某个div中的链接时应用

3 个答案:

已编辑：正在解答