5

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

我是一名音乐家，我一直在做“每日一首歌”的事情，每天我都会写一首小歌。我想将歌曲发布为<div>s inside <li>。在 div 中，我只想要一个简单的 mp3 播放器和一个“喜欢”或“不喜欢”按钮。用户可以投票，歌曲将根据投票数上下移动<li>。

我想用数学来保持这个简单——只是从数组中的喜欢中减去不喜欢，<li>然后从最高到最低排序。

最好有一个简单的 cookie 系统，至少可以防止某人一次性投票很多，但我不太担心。

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

4

2 回答 2

4

您将需要一个中心位置来存储此歌曲信息，主要是选票，但您也可以通过其中的其他歌曲信息（如标题、音乐文件路径等）。我建议一个简单的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; }

这是 JavaScript，使用 jQuery

$(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 留给你填写。不应该太多。如果您有任何问题，请告诉我。

于 2010-01-01T04:50:03.797 回答
0

是的，一个 MySQL 表似乎很重要，以便在您收集选票时保持选票。<li>然后是在构建页面时按排序顺序返回或输出's 的函数。如果贾斯汀没有更多的回来，我稍后会添加更多。

于 2010-01-01T21:20:31.407 回答