php – 根据用户投票移动div

我是新来的,但我喜欢这个网站.我检查了其他类似的问题,但我没有看到我在寻找什么.

我是一名音乐家,而且我每天都会写一首“今日之歌”,我每天都会写一首小歌.我希望将歌曲发布为< div> s< li>.在div中,我只想要一个简单的MP3播放器和一个“喜欢”或“不喜欢”按钮.用户可以投票并且歌曲将向上或向下移动< li>根据投票数量.

我想用数学保持这个简单 – 只是从< li>中的喜欢中减去不喜欢的东西.数组并从最高到最低排序.

最好有一个简单的cookie系统,至少让一个人不必一次投票,但我不太关心它.

我一直在寻找一个简单的PHP或Javascript教程.有人能指出我正确的方向吗？
谢谢！

最佳答案

你需要一个中心位置来存储这首歌曲信息,主要是投票,但你也可以通过其他歌曲信息(如标题,音乐文件路径等).我建议一个简单的MysqL表如下

CREATE TABLE daily_song (
    daily_song_id SMALLINT UNSIGNED NOT NULL AUTO_INCREMENT,vote          INT          NOT NULL DEFAULT 0,title         VARCHAR(255) NOT NULL DEFAULT "" COMMENT "Name of the song",path          VARCHAR(255) NOT NULL DEFAULT "" COMMENT "Path to the song on the server",ctime         DATETIME     NOT NULL            COMMENT "Datetime the song was added",PRIMARY KEY(daily_song_id)
);

我使用了以下HTML结构：


还有一点CSS

#daily-songs li { clear: both; list-style: none; }
#daily-songs h3 { margin: 0 10px 0 0; float: left; }
#daily-songs .voting-controls { height: 1em; }
#daily-songs .voting-controls * { float: left; }
#daily-songs .voting-controls .votes { padding: 0 10px; }

这是使用jQuery的JavaScript

$(function() {
    var listContainer = $("#daily-songs"),songs         = [];
    var songSort = function(a,b) {
        return +b.vote.text() - +a.vote.text();
    };

    var submitVote = function(song,delta) {
        $.post("vote.PHP",{
                id:    song.node.attr("id").match(/\d+$/)[0],delta: delta,votes: song.vote.text() // temporary
            },function(data) {
                if ( isNaN(data) ) { return; }
                song.vote.text(data);

                // Re-order the song list
                $.each(songs.sort(songSort),function() {
                    listContainer.append(this.node);
                });
            }
        );
    };

    listContainer.find("li").each(function() {
        var $this = $(this); 
        var song  = {
            node: $this,vote: $this.find(".votes")
        };
        $this.find(".vote-up").click(function() {
            submitVote(song,1);
        });
        $this.find(".vote-down").click(function() {
            submitVote(song,-1);
        });

        songs.push(song);
    });
});

还有一些用于vote.PHP的存根PHP：

PHP

$songId = !empty($_POST['id'])    ? (int)$_POST['id']    : 0;
$delta  = !empty($_POST['delta']) ? (int)$_POST['delta'] : 0;

if ( !$songId || !$delta ) {
    die("Invalid parameters");
}

// Make sure the voting value is within the valid rang
$delta = $delta > 0 ? 1 : -1;

// Check to see if user has already voted for this song,// If they haven't voted yet,connect to the database

// If the database connection is succesful,update song entry
// UPDATE daily_song SET votes=votes+$delta WHERE daily_song_id=$songId

// If the UPDATE is successful,SELECT the new vote value
// SELECT vote FROM daily_song WHERE daily_song_id=$songId

// Output the new vote value

// But for now,just accept the current vote and apply the delta
echo $_POST['votes'] + $delta;

我将离开PHP让你填写.不应该太过分.如果您有任何疑问,请告诉我.


 原文链接：https://www.f2er.com/js/429338.html

php – 根据用户投票移动div

猜你在找的JavaScript相关文章