0

我正在 Rails 中构建一个应用程序，允许用户上传照片，然后选择最终将使用 Paperclip 合成到其上的四个叠加层之一。

我是 Rails 的新手，我无法弄清楚如何提取 HTML 元素的 ID 并将其存储在我的数据库中 - 我有以下代码：

<div>  
 <span id="overlay"></span>
</div>

<div id="overlay-select">
  <ul>
    <li><a href="#"><img id="overlay1" src="<%= asset_path '/assets/overlays/pink1.png' %>" /></a></li>
    <li><a href="#"><img id="overlay2" src="<%= asset_path '/assets/overlays/green1.png' %>" /></a></li>
    <li><a href="#"><img id="overlay3" src="<%= asset_path '/assets/overlays/blue1.png' %>" /></a></li>
    <li><a href="#"><img id="overlay4" src="<%= asset_path '/assets/overlays/orange1.png' %>" /></a></li>
  </ul>
</div>

发生的情况是用户单击#overlay1 - 4，然后将 img 克隆并插入到 #overlay 跨度中。当用户保存条目时，我需要能够获取 #overlay 中存在的任何 img 的 ID，我一直在寻找解决方案，因为我不知道从哪里开始，但到目前为止还不够——任何帮助都会不胜感激！

4

1 回答 1

2

在这里，您面临两个问题。您不能只克隆图像，因为您在这些图像上使用了 id。ID 必须是唯一的。如果你只是克隆图像，你可能会遇到各种 js 问题，元素定位失败等等。话虽如此，您可以通过使用数据属性来解决这个问题。示例如下。

除了 id 之外，您的 html 将保持相似。

<div>  
 <span id="overlay"></span>
</div>

<div id="overlay-select">
  <ul>
    <li><a href="#"><img data-overlayid="overlay1" src="<%= asset_path '/assets/overlays/pink1.png' %>" /></a></li>
    <li><a href="#"><img data-overlayid="overlay2" src="<%= asset_path '/assets/overlays/green1.png' %>" /></a></li>
    <li><a href="#"><img data-overlayid="overlay3" src="<%= asset_path '/assets/overlays/blue1.png' %>" /></a></li>
    <li><a href="#"><img data-overlayid="overlay4" src="<%= asset_path '/assets/overlays/orange1.png' %>" /></a></li>
  </ul>
</div>

你的js会。建议为此使用javascript。此外，您将需要使用 ajax 将其实际发送到服务器，除非您打算使用 post 或 get 方法来执行此操作。

function getImgId(){

    //Data for span
    var overlaySpan = document.getElementById('overlay'),
        imgs = overlaySpan.getElementsByTagName('img'),
        imgsLn = imgs.length,
        relevantSrc,//filled with relevant image source
        relevantID;//filled with id of elem

    if(imgLn > 0){//If there are any images
        relevantSrc = imgs[0].src;

        //Data for imagelist.
        var overlaySelector = document.getElementById('overlay-select'),
            overlayImgItems = overlaySelector.getElementsByTagName('img');//Would be most efficient to use query selector but then browser support would be sacrificed

        for(var i=0;i<overlayImgItems.length;i++){
            var imgItem = overlayImgItems[i];
            if(imgItem.src === relevantSrc){
            relevantID = imgItem.getAttribute('data-overlayid');
            break;
        }
    }
    return relevantID;
}
于 2012-10-04T12:26:47.000 回答