0

ユーザーが写真をアップロードし、最終的に Paperclip で合成される 4 つのオーバーレイのいずれかを選択できるようにするアプリケーションを Rails で構築しています。

私は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 をクリックすると、その画像が複製されて #overlay スパンに挿入されます。ユーザーがエントリを保存するときに #overlay に存在する img の ID を取得できるようにする必要があります。どこから始めればよいかわからないため解決策を探しましたが、これまでのところ不足しています。大歓迎です！

4

1 に答える 1

2

ここで、2 つの問題に直面しています。これらのイメージでIDを使用しているため、イメージを複製することはできません。ID は一意である必要があります。イメージを複製しただけでは、要素のターゲティングが失敗するなど、あらゆる種類の js の問題が発生する可能性があります。そうは言っても、データ属性を使用することでこれを回避できます。以下サンプル。

あなたのhtmlは、IDを除いて同様のままです。

<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を使用することをお勧めします。また、post または get メソッドを使用して送信する予定がない限り、実際にこれをサーバーに送信するには ajax を使用する必要があります。

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 に答える