0

在用户单击删除链接后，我正在尝试使用 Jquery 显示一个确认框。单击删除链接时，它会将 post_id 发送到 url。只要设置了它并且它不为空，我就会触发动画，该动画将显示隐藏的确认框。

这是我目前没有工作的东西：

// if admin wants to delete a post check for post_id
if(isset($_GET['post_id']) && !empty($_GET['post_id'])){

    $delete_id = (int)$_GET['post_id'];
    $animate = true;

    echo '<script type="text/javascript">';
    echo 'var animate = '.$animate;
    echo '</script>';
}

GET 变量设置正确。

在我的 jquery 文件中，我有：

$(document).ready(function(){
    if(animate == true){
        $("#delete_confirm").fadeIn('3000','swing');

    }
});

和确认框：

<div id="delete_confirm">
                <p>Please confirm you want to delete this post.</p>
                <input type="button" id="delete" name="delete" value="confirm" />
            </div>

其中已display:none;在样式表中设置。

为什么animate变量设置为true时不显示？

谢谢

4

4 回答 4

3

更新：

试试这个，测试和工作：

<?php

if(isset($_GET['post_id']) && !empty($_GET['post_id'])){
    $delete_id = (int)$_GET['post_id'];
    $animate = true;
}

?>
<html>
<head>
<title>Simulation</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

var prop = {
    animate: "<?php echo $animate; ?>"
};

$(document).ready(function(){

    if(prop.animate == 1){
        $("#delete_confirm").fadeIn('3000','swing');
    }

});
</script>
<body>
<div id="delete_confirm">
    <p>Please confirm you want to delete this post.</p>
    <input type="button" id="delete" name="delete" value="confirm" />
</div>
</body>
</html>
于 2013-04-23T15:38:17.330 回答
2

您应该取消设置display:none;div 上的属性并.fadeOut(0)在页面加载时调用，或者opacity:0.0;在 CSS 文件中设置它。

此外，您可以使用window.location对象的search属性在客户端处理 GET 参数检查，然后检测是否使用正则表达式匹配设置了特定参数，而不是包括所有这些服务器端代码注入内容。这样您就不必使用任何内联 JavaScript。

var matches = window.location.search.match(/post_id/g);
if(matches && matches.length > 0)
{
// do animation
} else {
// do something else
}

像这样的东西应该可以工作，而且我个人更喜欢这样做，而不是注入脚本标签和内联 JavaScript。

于 2013-04-23T15:55:17.507 回答
0

php 检查是否设置了 GET 变量，如果是，则将 $animate 设置为 true。在此之后，Jquery 会检查 animate 变量，如果它设置为 true，那么应该会发生淡入淡出。

对我来说，这非常令人困惑。让我尝试对此进行更多研究。

  • 您有一个带有确认框的页面。
  • 当用户按下删除按钮时，确认框 ( <div id="delete_confirm">) 使用 jQuery 脚本显示。
  • 用户按下页面上的“删除”按钮。这里会发生什么？有两种选择：
    • 你做 AJAX 请求。
    • 你做 HTTP GET 请求。

根据您的评论和代码，我可以猜测您执行 HTTP GET 请求。在这种情况下，您重新加载页面。是的，PHP 获得了正确的值，$_GET['post_id']并且帖子被删除。

但是你会得到全新的 HTML 页面。在这个页面上，div<div id="delete_confirm">从一开始就是不可见的。这就是它没有显示和隐藏的原因。

当您查看源代码时，您会发现您的 JS 脚本<script type="text/javascript">...，我请求代码也可以$(document).ready(function(){...正常工作。但是你在新加载的 HTML 页面上得到它。

如果我在这里弄错了，请纠正我。

我认为您想隐藏您可能想要使用 AJAX 的确认框。但是您可能还想通过更改页面从页面中删除帖子。

于 2013-04-23T15:46:06.063 回答
-2

引用 jQuery 文档：“ .fadeIn() 方法为匹配元素的不透明度设置动画。 ”

.fadeIn() 将有效地将元素的 css 不透明度从 0 更改为 1。

您已经说过，在 CSS 中，您的元素具有display: none;因此您实际上所做的只是将不透明度从1（假设您没有在 CSS 中设置）更改为1同时将显示设置为none... 所以它会永远不会显示。

这似乎适用于.animate()which不允许您“动画”显示类型（从“none”到“block” - 您将使用 opacity）......但不适用于.fadeIn()/ .fadeOut()which确实允许您淡化一个块使用 CSSdisplay属性输入/输出。

我的错，我混淆了两者。

于 2013-04-23T15:51:40.470 回答