Question

我正在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，我已经找到了解决方案，因为我不知道从哪里开始但到目前为止还没有 - 任何帮助都会非常感谢！

Answer 1

这里面临两个问题。您不能只是克隆图像，因为您在这些图像上使用了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;
}

获取要存储在表/ Rails中的HTML元素的ID

1 个答案: