根据用户投票移动 div

我是新来的，但我喜欢这个网站。我检查了其他类似的问题，但没有看到我要找的东西。

我是一名音乐家，有一段时间我一直在做“每日之歌”，每天写一首小歌。我想将歌曲发布为<div>在里面<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 结构：

<ul id="daily-songs">
    <li id="song-id-1">
        <h3>Song 1</h3>
        <div class="voting-controls">
            <a href="#" class="vote-up">Up</a>
            <div class="votes">8</div>
            <a href="#" class="vote-down">Down</a>
        </div>
        <div class="player"></div>
    </li>
    <li id="song-id-2">
        <h3>Song 2</h3>
        <div class="player"></div>
        <div class="voting-controls">
            <a href="#" class="vote-up">Up</a>
            <div class="votes">5</div>
            <a href="#" class="vote-down">Down</a>
        </div>
    </li>
    <li id="song-id-3">
        <h3>Song 3</h3>
        <div class="player"></div>
        <div class="voting-controls">
            <a href="#" class="vote-up">Up</a>
            <div class="votes">4</div>
            <a href="#" class="vote-down">Down</a>
        </div>
    </li>
</ul>

和一点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);
    });
});

还有一些 PHP 存根vote.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 留给您填写。应该不会太麻烦。如果您有任何疑问，请告诉我。