Couple days ago I have asked a question, I will link it here, since it has some explanations about what I want, so you can get a idea what I want to do, JavaScript array splice This is solved now, and the codes works fine, But now I want to get the value of the card that has been spliced ( the cards we get when we drag them in box and click on it )
I thought this would be simple, but I guess I am wrong,
Concrete: I want that the user picks up 3 cards, and this will be mailed to the owner of the website, at the moment I can pick up 3 cards, by using splice the user can not pick multiple the same card, but now I want that the cards that it picks up, turn into a variable or something that I can mail them later.
$(function () {
var cars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var rand = cars[Math.floor(Math.random() * cars.length)];
$(".cards img").each(function (index) {
var src = cars.splice(Math.floor(Math.random() * cars.length), 1);
console.log(src, cars.join())
$(this).wrap('<div class="front"></div>')
.parent().wrap('<div class="flipper"></div>')
.parent().wrap('<div class="flip-container"></div>')
.append('<div class="back"><img src="kaart/'+ src[0] + '.png"</img> </div>');
});
in the html>
<script>
document.write ("Those will be mailed" + src[0] + "You get it ? "; )
</script>
JSFiddle : http://jsfiddle.net/arunpjohny/dkk2nqyg/9/
quite hard to explain, hope you get the idea.
You can set the src value using data api while creating the elements
$(".cards img").each(function (index) {
var src = cars.splice(Math.floor(Math.random() * cars.length), 1);
$(this).wrap('<div class="front"></div>')
.parent().wrap('<div class="flipper"></div>')
.parent().wrap('<div class="flip-container"></div>')
.data('src', src[0])
.append('<div class="back"><img src="' + src[0] + '.png"</img> </div>');
});
then you can get an array of selected items using
var selected = $('#dvDest .flipper').map(function(){
return $(this).data('src')
}).get();
//can use ajax to sent this data to server and then mail it
Demo: Fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.