通過單擊DIV單擊JavaScript重新加載DIV的圖像和類。

我工作的代碼過長後，所以我在這裏做了一個小提琴：http://jsfiddle.net/Emily92/5b72k225/通過單擊DIV單擊JavaScript重新加載DIV的圖像和類。

此代碼需要一個隨機圖像，並削減其分成取決於是類的件數應用於包含圖像的div。

當頁面加載時，從數組中選擇一個隨機圖像，並將類應用到它，我想要做的是創建一個單獨的div，當點擊時將重新加載包含圖像的div。我正在尋找的結果是圖像被替換爲一個新的隨機圖像與類適用於它。

現在，我可以在div中出現一個新圖像的唯一方法是重新加載整個頁面，理想情況下，只需要重新加載div，而不是重新加載所有其他頁面元素。

我還沒有能夠做到這一點，但在這裏得到了一些關於如何重新加載一個圖像和類的點擊一個div的幫助，行980-1018的JavaScript代碼在jsfiddle是當前嘗試實現這一點，但解決這個問題似乎要複雜得多，因爲圖像是由Javascript代碼操縱的，所以也許這需要在新的隨機圖像被選中的同時重新加載？

這是解決這個問題的當前的嘗試：

$(function() { 
    var imageArray = [ 
    'http://www.webdesignhot.com/wp-content/uploads/2009/10/CatsVectorImage.jpg', 
    'http://www.costume-works.com/images/halloween_cat_in_witch_hat.jpg', 
    'http://onthewight.com/wp-content/2013/04/sooty-ryde.jpg']; 
    reloadImages(imageArray); 
    $('#reload').on('click',function(){ 
     $("#masterdiv img[id^='div']").each(function(index){ 
      $(this).removeClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN"); 
      $(this).fadeOut("slow", function() { 
       if(index==0) { 
        reloadImages(imageArray); 
       } 
       $(this).addClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN"); 
       $(this).fadeIn(); 

      }); 
     }); 
    }); 
}); 


function shuffleArray(array) { 
    for (var i = array.length - 1; i > 0; i--) { 
     var j = Math.floor(Math.random() * (i + 1)); 
     var temp = array[i]; 
     array[i] = array[j]; 
     array[j] = temp; 
    } 
    return array; 
} 

function reloadImages(array){ 
    shuffleArray(array); 
    for(var i=0;i<3;i++){ 
     // places the first image into all divs 
     document.getElementById('div'+(i+1)+'id').src=array[0]; 
    } 
}

我在的jsfiddle的HTML部分寫在這個問題上的更多細節。我非常感謝解決此問題的任何建議，並且提前感謝您的任何幫助！

來源

2015-10-03 Emily

該插件在頁面加載之前讀取圖像'src，拿走它們，然後生成拼圖。因此，你不能只是更新圖像，因爲他們不在那裏了。所以你必須清除每個難度等級下的div（easyDiv,mediumDiv,hardDiv），在每個div下追加一個新的<img>然後調用/重新加載插件。更新代碼：http://jsfiddle.net/5b72k225/6/

變化我做：

單獨老reloadImages到initImages和reloadImages。在開始時調用initImages，而在重新加載時調用reloadImages。
通過從$(document).ready()塊取出插件的初始化創建新功能makePuzzle，因此可以在重新加載新圖像後調用makePuzzle。

新的$(document).ready()塊現在會初始化圖像並將單擊事件處理程序附加到該按鈕。點擊後，div s被清空，插入新的<img>並調用插件。

來源

2015-10-04 02:41:56

看起來很完美，工作很好。 :) – turbopipp

嗨@ anugerah-erlaut非常感謝你的幫助！這正是我所需要的，我將其標記爲正確的答案。我確實有一個關於它的問題，我想知道如何讓圖像在變化時淡入淡出？我認爲''img.appendTo（divs [i]）。fadeIn（'slow'）;''可能工作，但它不起作用，你知道什麼可能工作嗎？再次感謝你的幫助！ – Emily

您可以點擊'＃masterdiv''fadeOut'，重新加載圖片，然後調用插件。一旦完成，請調用'fadeIn'來加載新的拼圖。我已經更新了新的代碼（第1014-1023行）小提琴，檢查出來：http://jsfiddle.net/5b72k225/8/ –

通過單擊DIV單擊JavaScript重新加載DIV的圖像和類。

回答

相關問題