一連のイメージからイメージを選択し、1つの関数でキャンバスに配置します。

Question

私はAlexです。これが私の最初のスタックオーバーフローの質問です。

以下のスクリプトがあります。 - このスクリプトは、apiから画像を取得します。 - apiから受信した各画像に対して、要素が作成されます - 各画像に対してクラス属性が作成されます - 各画像に対してid属性が作成されます。 - 各イメージに対して、要素が作成されます。それぞれのために、私は動的にonclickイベントを追加します。各onclickはそれ自身の機能に関連付けられています。

アンカー1,2,3,4,5機能は、ユーザーが選択したイメージをクリックするたびに作成され、そのイメージは次にキャンバスに配置されます。それが完了すると、カラー泥棒jsがキックインし、選択した画像のカラーパレットを表示します。

すべては完全に機能します。

私がしたいことは、各画像に機能を持たせる代わりに、画像をキャンバスにクリックして配置する1つの機能を持たせることです。 基本的に私のコードはあまり冗長化されないと思う。

// search the collection using a JSON call 
function search(query) { 
    return $.getJSON("https://www.rijksmuseum.nl/api/en/collection?q=Q&key=r4nzV2tL&imgonly=True&ps=5&format=json".replace("Q", query)); 

} 

var searchBtn = document.getElementById("search"); 
searchBtn.addEventListener("click", doSearch); 

var resultD = document.getElementById("result"); 
var searchField = document.getElementById("query"); 

//search function starts here 
function doSearch() { 
    $("#result").show(); // result div to show when making new search 
    resultD.innerHTML = ""; 
    var searchString = searchField.value; 
    if (searchString !== "") { 
    search(searchString).done(function(data) { 
     for (var artObj in data.artObjects) { 
     var rImg = document.createElement("img"); // create the image 
     rImg.setAttribute("crossOrigin", "Anonymous"); //needed so I can actually copy the image for later use 
     rImg.setAttribute("class", "imageClass"); //needed so I can actually copy the image for later use 
     var link = document.createElement("a"); // create the link 
     link.setAttribute('href', '#'); // set link path 
     // link.href = "www.example.com"; //can be done this way too 
     rImg.src = data.artObjects[artObj].webImage.url; // the source of the image element is the url from rijks api 
     link.appendChild(rImg); // append image to link 
     resultD.appendChild(link); // append link with image to div 
     resultD.innerHTML += data.artObjects[artObj].title; // this is the title from rijks api 
     $("#result img").each(function (i, image){ //for each image create a different id 
     image.id = "image" + (i + 1); 
     }); 
    $("#result a").each(function (i, anchor){ //for each anchor create a different id 
     anchor.id = "anchor" + (i + 1); 
     anchor.setAttribute('onclick', "anchor" + (i + 1)+'();return false;'); // set link path 
     //return false needed so to avoid page jump 
     }); 
    resultD.innerHTML += "<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>"; 
    } 
}); 
} 
}//search function ends here 



//for each image create size matching canvas 
function anchor1(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image1"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
    return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

function anchor2(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image2"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

function anchor3(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image3"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

function anchor4(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image4"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

function anchor5(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image5"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

Answer 1

あなたは、あなたが扱っているものは基本的で動的なデータを扱うことを可能にするjQueryを使って.onイベントを利用したいと思います。

あなたは彼らに同じ値を与える代わりに、各<a>ごとに異なるIDを生成するので$("#result a").each(function (i, anchor){ //for each anchor create a different id anchor.id = "anchor" + (i + 1);

で（anchor1、ANCHOR2 ...）のようなあなたのさまざまな機能を呼び出すために、個々のidと異なる<a>のリンクを生成しています、それはクラスであり、IDではない。 IDは常にユニークで繰り返してはいけません。クラスを繰り返すことができます。たとえば、<a class="anchor"><...</a>

その特定のレコード/イメージからのデータを処理する場合は、そのように呼び出すとします。

$(document).on('click','.anchor', function() { 

}); 

ここから始めることができる作業例です。

<a class="anchor" data-id="1">...</a> 


$(document).on('click','.anchor', function() { 
    var anchor_id = $(this).attr('data-id').val(); 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image"+anchor_id); //this will attach the id for that image here 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
     var colorThief = new ColorThief(); 
     var color = colorThief.getPalette(img, 18); 
     var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;  </div>'+'<br>'); 
     }); 
     $("#colors").html(newHTML.join('')); 
    }, 500); //timeout for image load to canvas - ends 
}); 

http://api.jquery.com/on/

https://learn.jquery.com/events/handling-events/

http://html-tuts.com/jquery-this-selector/