我有一个网页，其中包含播放音乐的 iframe soundcloud 音乐“盒子”列表，我想在这些 iframe 的侧面添加按钮，以根据人们对它们的投票上下移动盒子。有点像 reddit 上的东西。 (我这样做是为了好玩，无意发布)我尝试绝对定位 iframe，然后使用 javascript 向上或向下移动，但意识到尝试编码将是一场灾难。解决这个问题的最佳方法是什么？我是网络开发的新手。
(我使用 bootstrap 来设置网页样式)
这是 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>';
}
关于javascript - 我正在尝试在我的网页上动态地上下移动元素。我怎么做？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29290677/