根据用户投票移动div [英] Move div based on user voting

问题描述

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

I'm new here, but I love the site. I checked through the other similar questions, but I didn't see what I'm looking for.

我是一名音乐家，我一直在做当天的歌我每天写一首小歌的东西。我想在< li> 中将歌曲发布为< div> s。在div中，我只想要一个简单的MP3播放器和一个喜欢或不喜欢的按钮。用户可以投票，并且歌曲将根据投票数上下移动< li> 。

I'm a musician, and I've been doing a "song of the day" thing for a while where I write a little song every day. I want to post the songs as <div>s inside <li>. In the divs, I just want a simple mp3 player and a "like" or "dislike" button. The user can vote and the song will move up or down the <li> based on the number of votes.

我想用数学保持这个简单 - 只需从< li> 数组并从最高到最低排序。

I want to keep this simple with the math-just subtracting the dislikes from the likes in the <li> array and ordering them from highest to lowest.

最好有一个简单的cookie系统，以至少让一个人在一个人中投票坐着，但我并不太关心它。

It'd be good to have a simple cookie system in place to at least keep someone from voting a lot all in one sitting, but I'm not too concerned about it.

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

I've been looking for a simple PHP or Javascript tutorial on this. Can anyone point me in the right directions? Thanks!

推荐答案

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

You're going to need a central location to store this song information, mainly the votes, but you might as well through the other song information (like title, path to music file, etc) in there as well. I suggest a simple MySQL table as follows

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结构：

I used the following HTML structure:

<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

Here's the JavaScript, using 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给你填写。不应该太多的延伸。如果您有任何问题，请告诉我。

I'll leave the PHP for you to fill in. Shouldn't be too much of a stretch. Let me know if you have any questions.

这篇关于根据用户投票移动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！