如何修复blue-imp gallery中rails的jquery错误

时间:2014-02-28 07:36:25

标签: jquery ruby-on-rails

我在弹出窗口中显示图片时遇到问题。

查看页面

<div class="col-md-offset-1">
  <div class='row'><br/>
    <div id ="links">
  <% @cable_photos.each_with_index do |cable_photo, i| %>
  <% i += 1 %>
    <div class="col-md-2">
      <label>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      <%= link_to 'Edit', edit_cable_photo_path(cable_photo), class: 'btn btn-default btn-xs' %>
      <%= link_to cable_photo, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger btn-xs' do %>
      <i class='icon icon-remove'></i>
      <% end %>
      </label>
      <%= link_to   cable_photo.avatar.url  do %>
      <%= image_tag cable_photo.avatar.url(:medium), class: "img-thumbnail" ,style: "height: 140px; width:  250px;" %>
      <% end %>
      <p style="text-align:center;"><b><%= cable_photo.address %></b></p><br/>
    </div>
    <% if (i%5) == 0 %>
    <div class='row'></div>
    <% end %>  
    <% end %>        
  </div>
</div>
</div>

<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>

脚本

document.getElementById('links').onclick = function (event) {
  event = event || window.event;
  var target = event.target || event.srcElement,
    link = target.src ? target.parentNode : target,
    options = {index: link, event: event},
    links = this.getElementsByTagName('a');
  blueimp.Gallery(links, options);
};

图像可在弹出窗口中查看。但它也需要编辑和销毁链接。所以, links = this.getElementByTagName(“a”); 中的问题 在链接div中,我必须使用编辑和删除链接显示图像。

因此,当我点击编辑按钮时,它不会重定向到编辑图像页面。而不是它尝试在弹出窗口中显示编辑为图像。因为jquery getElementByTagName。

请帮帮我。如何解决这个问题。

1 个答案:

答案 0 :(得分:0)

你为什么不这样做:

document.getElementById('links').onclick = function (event) {
  event = event || window.event;
  var target = event.target || event.srcElement,
    link = target.src ? target.parentNode : target,
    options = {index: link, event: event},
    links = this.getElementsByTagName('a');
  blueimp.Gallery(links, options);

  //Stops default link "action" happening on current page
  event.preventDefault();
  return false;
};