我有一个网页，其中包含播放音乐的iframe soundcloud音乐“盒子”列表，我想在这些iframe的侧面添加按钮，以便根据投票的人上下移动盒子。有点喜欢reddit的东西。 （我这样做是出于娱乐目的，无意发布此内容）。我尝试了绝对定位iframe，然后使用javascript上下移动，但意识到尝试编码会很麻烦。最好的方法是什么？我是Web开发的新手。
（我使用了引导程序来设置网页样式）
这是html文档的正文：
<body>
<div class="page-header" class="stayPut"><div class="stayPut" id="Header"><img src="logo.png" ALT="Hamiltron" WIDTH=300 HEIGHT=61/></div></div>
<div class="container">
<div class="jumbotron"><h1 style="text-align: center; color: white;">An Ultimate Music List.</h1></div>
<div class="jumbotron">
<iframe id="box1" width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/113414910&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
<iframe id="box2" width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/180568985&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
<iframe id="box3" width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/161660686&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
<script>
document.getElementById("box1").style["position"]="absolute";
document.getElementById("box1").style["top"] = "20px";
document.getElementById("box1").style["width"] = "75%";
</script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
最佳答案
我很乐意提供帮助，所以我将向您展示最好的方法。您将需要启用投票和数据库，甚至只是一个表数据库，其值如
ID | VoteCount | TRACKID
0 3 180568985
如果您在哪里，我将首先进行处理，然后分配按钮以增加数据库中的投票数。我会用Ajax来轮询PHP file to connect to the database，这样您的页面在每次投票后都不会重新加载！
然后，您将需要使用Javascript或从数据库中按顺序轮询项目。我创建了一个示例，将为您显示它们：
Working Example of Following Code | JSFiddle.com
//This is a JSON Object that can be assessed like dataFromDatabaseExample[2].vote = 100
//NOTE THESE ARE NOT IN THE RIGHT ORDER ;)
var dataFromDatabaseExample = [{id: 0, vote: 43, songID: 113414910},
{id: 1, vote: 5, songID: 180568985},
{id: 2, vote: 100, songID: 161660686}];
//Creates an event listener to listen for if someone clicks the refresh button
$('#refresh').on('click',function(){
refreshData();
});
//Function that holds main data that can be run whenever
function refreshData(){
//Clears the bit of the page where the votes are going to be ie RESET
$('#soundCloudItems').html("");
//Sort the values to be in order using our custom sorting function compareVotes
var songs = dataFromDatabaseExample.sort( compareVotes );
//For every item we got
for(var i=0;i<songs.length;i++){
//Title it (Optional but shows vote count)
$('#soundCloudItems').append("Votes: "+songs[i].vote+"<br>");
//Display the soundcloud box
$('#soundCloudItems').append(getSongCode(songs[i].id,songs[i].vote,songs[i].songID));
}
}
//Run on Load to display some data
refreshData();
//TWO HELPER FUNCTIONS ///////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
//Compares two items from the array, for the vote count
function compareVotes(a,b) {
if (a.vote > b.vote)
return -1;
if (a.vote < b.vote)
return 1;
return 0;
}
//Just returns all the bulky code in a nice form as a piece of HTML/Text
function getSongCode(id,vote,SongId){
return '<iframe data-voteCount="'+id+'" id="soundcloud'+id+'" width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/'+SongId+'&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>';
}