Question

我正在尝试构建一个允许用户将歌曲列表上传到他们网站的应用程序。这些函数有效，当列表上传时，它会向下滑动并淡入。这是Jquery ......

function list_post() {
    var list_date = $("#list_date").val();
    var team_name = $("#team_name").val();
    var song_list = $("#song_list").val();

    if (list_date == "" || team_name == "" || song_list == ""){
        alert("Please enter a list!");
    }else{
            $.post("scripts/send_list_parse.php", {list_date: list_date, team_name: team_name, song_list: song_list}, function(data){
                $(".list").prepend(data);
                $("#fade").fadeIn(1500);
                $(".list").slideDown(900);
                $("#list_date").val("");
                $("#team_name").val(team_name);
                $("#song_list").val("");
            });
    }
}

问题是，当我上传第二个列表时，它不会淡入或向下滑动它只是出现。我希望每次单击按钮时它都会淡出并滑动。任何想法？

这是send_list_parse.php文件......

<?php
session_start();
include_once("connect_to_mysql.php");
include_once("checkuserlog.php");

if(isset($_POST['list_date']) && ($_POST['song_list']) && ($_POST['team_name'])){
    $list_date = $_POST['list_date'];
             $list_date = stripslashes($list_date);
         $list_date = strip_tags($list_date);
         $list_date = preg_replace('/\r?\n|\r/', "<br />", $list_date);
         $list_date = mysql_real_escape_string($list_date);
         $list_date = str_replace("'", "&#39;", $list_date);
         $list_date = "".$list_date."";
    $song_list = $_POST['song_list'];
         $song_list = stripslashes($song_list);
         $song_list = strip_tags($song_list);
         $song_list = preg_replace('/\r?\n|\r/', "<br />", $song_list);
         $song_list = mysql_real_escape_string($song_list);
         $song_list = str_replace("'", "&#39;", $song_list);
    $team_name = $_POST['team_name'];
         $team_name = stripslashes($team_name);
         $team_name = strip_tags($team_name);
         $team_name = preg_replace('/\r?\n|\r/', "<br />", $team_name);
         $team_name = mysql_real_escape_string($team_name);
         $team_name = str_replace("'", "&#39;", $team_name);

    $sql = mysql_query("INSERT INTO list (date, team_name, song_list) VALUES ('$list_date','$team_name','$song_list')") or die (mysql_error());
    echo '<div id="fade"><span><h4 style="margin-bottom:0px; font-size:14px;">'.$list_date.'</h4>'.$song_list.'<br /></span></div>';
}else{
    echo "Error";
}
?>

以下是我创建列表的原始页面部分...

$create_song_list = '
        <div class="boxHeader2" style="padding:0px; margin:0 auto;">
        <a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox(\'infoBox\');" style="color:white; font-weight:bold; text-decoration:none;">&bull;&emsp;Create Song-List</a>
        </div><div class="editBox" id="infoBox" style="color:white; font-size:15px; margin:7px 5px 0px 15px;">
        <input id="list_date" name="list_date" type="text" placeholder="List-Date" style="width:100%;" /><br />
        <textarea id="song_list" name="song_list" placeholder="Song List Here" style="width:100%;" rows="7"></textarea><br />
        <input id="team_name" name="team_name" type="hidden" value="'.$team_name.'" />
        <input id="submit_list" name="submit_list" type="submit" value="submit" onclick="javascript:list_post();" /><br />
        </div>';

这是渲染的地方......

// ------- Populate Song List ---------------------------
$display_song_list = '';
$sql = mysql_query("SELECT * FROM list WHERE team_name='$team_name' ORDER BY id DESC LIMIT 9"); // Query List
$count_sql = mysql_num_rows($sql);
if($count_sql > 0){
    while($row = mysql_fetch_array($sql)){
        $song_list = $row['song_list'];
        $date = $row['date'];
        $display_song_list .= '
    <div class="list" style="display:none;">

        </div>
    <h4 style="margin-bottom:0px; font-size:14px;">'.$date.'</h4>'.$song_list.'<br />';
    }
}
// ------- End Populate Song List -----------------------

Answer 1

试试这个:(未经测试）

function list_post() {

    var list_date = $("#list_date").val();
    var team_name = $("#team_name").val();
    var song_list = $("#song_list").val();

    var dataString = 'list_date='+list_date+'&team_name='+team_name+'&song_list='+song_list;

    if (list_date == "" || team_name == "" || song_list == ""){
        alert("Please enter a list!");
    } else {

        $.ajax({
            url: "scripts/send_list_parse.php",
            method: 'POST',
            data: dataString,
            cache: false,
            beforeSend: function() {$("#fade").fadeIn(1500);},
            success: function(data){
                $("#list").prepend(data).delay(2000).slideDown(900);
                $("#list_date").val("");
                $("#team_name").val(team_name);
                $("#song_list").val("");                
            }
        });

    }

}

Answer 2

目前还不清楚你是如何标记列表的（我希望在<ol>或<ul>中使用，但在应用{{1}之前需要hide()注入的元素对它来说。

使用fadeIn()将其插入DOM只会在那里呈现它。

jquery前置和下滑问题

2 个答案: