jQuery的變化圖像上隨機點擊

的HtmljQuery的變化圖像上隨機點擊

<body> 
     <img class = die src="one.jpg"> 
     <img class = die src="two.jpg"> 
     <img class = die src="three.jpg"> 
     <img class = die src="energy.jpg"> 
     <img class = die src="hit.jpg"> 
     <img class = die src="heal.jpg"> 
    </body>

jQuery的

var dice = ["one.jpg","two.jpg","three.jpg","energy.jpg","hit.jpg","heal.jpg"]; 
    $(function() { 
     $('.die').click(function() { 
      var num = Math.floor(Math.random()*dice.length); 
      $(this).html('<img src="'+dice[num]+'">'); 
     }); 
    });

每當我測試一下它不會改變圖像感謝您的時間

來源

2015-06-29 sajax63

您需要更改被點擊的img的src屬性

$(function() { 
 
    //var dice = ["//placehold.it/64X64&text=1", "//placehold.it/64X64&text=2", "//placehold.it/64X64&text=3", "//placehold.it/64X64&text=4", "//placehold.it/64X64&text=5", "//placehold.it/64X64&text=6"]; 
 

 
    //create the array dynamically using the .die elements 
 
    var dice = $('.die').map(function() { 
 
    return $(this).attr('src') 
 
    }).get(); 
 

 
    $('.die').click(function() { 
 
    var num = Math.floor(Math.random() * dice.length); 
 
    //This may not change the image always as the same src can be selected by this logic 
 
    $(this).attr('src', dice[num]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img class="die" src="//placehold.it/64X64&text=1"> 
 
<img class="die" src="//placehold.it/64X64&text=2"> 
 
<img class="die" src="//placehold.it/64X64&text=3"> 
 
<img class="die" src="//placehold.it/64X64&text=4"> 
 
<img class="die" src="//placehold.it/64X64&text=5"> 
 
<img class="die" src="//placehold.it/64X64&text=6">

的die元素是img元素，你不能設置innerHTMLimg的元素，而不是你需要改變src屬性來改變圖像

如果您想在每次點擊時改變圖像

$(function() { 
 
    //var dice = ["//placehold.it/64X64&text=1", "//placehold.it/64X64&text=2", "//placehold.it/64X64&text=3", "//placehold.it/64X64&text=4", "//placehold.it/64X64&text=5", "//placehold.it/64X64&text=6"]; 
 

 
    //create the array dynamically using the .die elements 
 
    var dice = $('.die').map(function() { 
 
    return $(this).attr('src') 
 
    }).get(); 
 

 
    $('.die').click(function() { 
 
    var src, curr = $(this).attr('src'); 
 
    do { 
 
     src = dice[Math.floor(Math.random() * dice.length)] 
 
    } while (src == curr); 
 
    $(this).attr('src', src); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img class="die" src="//placehold.it/64X64&text=1"> 
 
<img class="die" src="//placehold.it/64X64&text=2"> 
 
<img class="die" src="//placehold.it/64X64&text=3"> 
 
<img class="die" src="//placehold.it/64X64&text=4"> 
 
<img class="die" src="//placehold.it/64X64&text=5"> 
 
<img class="die" src="//placehold.it/64X64&text=6">

來源

2015-06-29 04:26:36

http://jsfiddle.net/arunpjohny/wwe4kc9j/ –

jQuery的變化圖像上隨機點擊

回答

相關問題