JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了php – 根据用户投票移动div大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

我一直在寻找一个简单的PHPJavascript教程.有人能指出我正确的方向吗?
谢谢!

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

create table daily_song (
    daily_song_id @R_801_11412@LLINT 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         datetiR_40_11845@E     NOT NULL            COMMENT "datetiR_40_11845@e the song was added",PRIMary KEY(daily_song_id)
);

我使用了以下HTML结构:

    Ting-controls"> Ting-controls"> Ting-controls">

还有一点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让你填写.不应该太过分.如果您有任何疑问,请告诉我.

大佬总结

以上是大佬教程为你收集整理的php – 根据用户投票移动div全部内容,希望文章能够帮你解决php – 根据用户投票移动div所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。