Javascript 无法在PHP echo中调用jQuery_Javascript_Php_Jquery_Html_Css

Javascript 无法在PHP echo中调用jQuery

javascript php jquery html css

Javascript 无法在PHP echo中调用jQuery,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,当我在HTML中使用jQuery时，它工作得很好。但是当我在PHP中回显时它就不工作了。当我想阅读内容时，它应该做下拉操作下面是它的外观。现在我想单击“查看”，它应该显示以下内容： .post { background-color:White; width:800px; box-shadow:inset 1px 1px 100px 5px #ccc; border-top:3px solid #ffc; display:none; } blog.php <html> <he

当我在HTML中使用jQuery时，它工作得很好。但是当我在PHP中回显时它就不工作了。当我想阅读内容时，它应该做下拉操作

下面是它的外观。现在我想单击“查看”，它应该显示以下内容：

.post
{
background-color:White;
width:800px;
box-shadow:inset 1px 1px 100px 5px #ccc;
border-top:3px solid #ffc;
display:none;
}

blog.php

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="javascript" type="text/javascript" href="jquery-3.1.1.min.js">
    <script>
        $(document).ready(function() 
        {
            $('#drop').click(function()
                {
                    $('.post').slideToggle('fast');
                });
        });
    </script>
</head>
<body>



    <div id="contain">
        <div id="banner">
        </div>
        <div id="blogposts">
            <?php
            include 'constr.php';
            $query = mysqli_query($connect,"SELECT * from blog LIMIT 10");
            while($read = mysqli_fetch_array($query))
            {
                $yazar = $read["yazarAdi"];
                $baslik = $read["baslik"];
                $tarih = $read["tarih"];
                $icerik = $read["icerik"];
                echo '
                    <div id="postcontain">
                    <table class="info">
                        <tr>
                            <td><p style=" font-style:Italic;">'.$yazar.'</p> <td><p style="text-align:right; padding-right:10px;  font-style:Italic;">'.$tarih.'</p></td>
                        </tr>
                        <tr>
                            <td><p style="padding-bottom:5px; font-size:15px; font-weight:bold;">'.$baslik.'</p></td>
                            <td style="text-align:right;"><a id="drop">View</a></td>
                        </tr>

                    </table>
                    '.$icerik.'
                    </div>
                ';
            }
            ?>

        </div>
    </div>
</body>
</html>

单击必须滑动具有类post的元素：

您缺少将此类元素添加到代码中的功能

id属性在同一文档中应该是唯一的，因此您必须将循环中的id更改为类，例如：drop和postcontain

注意：如果您的代码中有帖子，那么您现在使用的js将同时滑动所有帖子，因此您可能希望转到父postcontain，然后使用以下命令在内部切换帖子：

$(this).closest('.postcontain').find('.post').slideToggle('fast');

完整JS:

希望这有帮助。

使用“最近的+下一步+查找”选择与单击的选项卡相关的元素

 $(document).ready(function() 
    {
      $('.info a').click(function()
       {
         $(this).closest('.info').next().find('.post').slideToggle('fast');
       });
    });

考虑使用类而不是ID，而不是回显所有HTML。关闭上面的PHP标记？>并在HTML代码之后在下面再次打开它

比如：

尝试将id=drop更改为class=drop

Hense jQuery将是$.drop来学习该类。

我更喜欢将PHP代码与HTML分开，为了使其清晰易读，您可以创建一个新的PHP文件来从数据库json格式获取数据：

创建data.php

一些解释：

$.getJSONdata.php调用我们的新页面以获取json格式的数据。 $.eachdata，函数键，val{获取每个项的数据项。

$mytable.appenditem；将行添加到我们的表中，问题是？您确定您的数据对客户端可见，以便jQuery可以成功运行吗？当您删除display时，数据成功传递：无；post元素在$icerik变量中？@madalinivascu YesBrilliant！但现在它只对第一个post执行此操作。当我单击其他元素时，它们不起作用如果div postcontain是每个帖子的父级，那么应该可以工作。是的，问题是，我使用了id而不是类。现在可以工作了，thanks@KorayBallı这是涵盖id重复的完整答案，应该被接受。我希望我能接受其中两篇文章。再次感谢Zakaria和Madalin。我接受Madalin的一篇文章的原因是因为他是第一个回应的。由于他的解决方案较短且适合我的实际情况，当我将drop改为.info a时，它起了作用。谢谢！不必要的双重请求只是为了“更好”代码可读性。但是，更好取决于个人意见。很抱歉，这是一个不好的建议。主要问题是绑定单击尚未加载的项目，最好的方法是加载数据ajax？然后在成功后将单击绑定到链接。单独使用PHP文件意味着将请求增加一倍。一切都应该在客户端进行。这就是为什么JS/Jquery可能是最好的方法。

$(document).ready(function() 
{
    $('.drop').click(function(){
        $(this).closest('.postcontain').find('.post').slideToggle('fast');
    });
});

 $(document).ready(function() 
    {
      $('.info a').click(function()
       {
         $(this).closest('.info').next().find('.post').slideToggle('fast');
       });
    });

<?php while ($something): ?>

  <div class='Foo'>
    Bar
  </div>

<?php endwhile; ?>

<?php
include 'constr.php';
$query = mysqli_query( $connect, "SELECT * from blog LIMIT 10" );

$blog = [];
while ( $read = mysqli_fetch_array( $query ) ) {
    $item = array(
        "yazarAdi" => $read["yazarAdi"],
        "baslik"   => $read["baslik"],
        "tarih"    => $read["tarih"],
        "icerik"   => $read["icerik"],
    );
    array_push( $blog, $item );
}

echo json_encode( $blog );

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="contain">
    <div id="banner">
    </div>
    <div id="blogposts">
        <div id="postcontain">
            <table id="mytable" class="info">

            </table>
        </div>
    </div>
</div>

<script type="application/javascript">
    $(document).ready(function () {
        $.getJSON("data.php", function (data) {
            $.each(data, function (key, val) {
                var item = '<tr>' +
                    '<td><p>' + val['yazar'] + '</p> <td><p>' + val['tarih'] + '</p></td>' +
                    '</tr>';

                item += '<tr>' +
                    '<td><p>' + val['baslik'] + '</p></td>' +
                    '<td><a href="#" class="drop" data-yazar="' + val['yazar'] + '">View</a></td>' +
                    '</tr>';

                $("#mytable").append(item);

            });

            $('.drop').click(function () {
                alert("drop clicked at : " + $(this).data('yazar'));
            });
        });
    });
</script>
</body>
</html>