Question

我有一个网页，其中包含iframe soundcloud音乐列表＆＃34; box＆＃34;播放音乐，我想在这些iframe的一侧添加按钮，根据人们对它们进行投票来上下移动这些框。有点像reddit。（我这样做是为了好玩并且无意发布这个）我尝试了绝对定位iframe然后使用javascript向上或向下移动但是意识到尝试编码将是一场灾难。怎样才能解决这个问题？我对网络开发比较陌生。

（我使用bootstrap来设置网页样式）

这是html doc的主体：

<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&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;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&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;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&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;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>

Answer 1

我很乐意帮助，所以我会告诉你我做的最好方法。您需要启用投票和数据库，甚至只需要一个具有

等值的1表数据库

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+'&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>';
}

我正试图在我的网页上动态移动元素。我怎么做？

1 个答案: