Question

当我在HTML中使用jQuery时，它运行正常。但是当我在PHP中回显它时它不起作用。当我想阅读内容时它应该做下拉列表。

这是它的样子。现在我想点击＆＃34;查看＆＃34;它应该显示内容：

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>

与内容相关的CSS：

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

Answer 1

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

$('.post').slideToggle('fast');

你很想在你的代码中添加这个类的元素。

id属性在同一文档中应该是唯一的，因此您需要将循环中的id更改为类，例如：drop和{{1 }}

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

postcontain

完整JS：

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

希望这有帮助。

Answer 2

使用closest+next+find选择与您点击的标签相对应的元素

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

考虑使用类而不是ID

Answer 3

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

创建 data.php

<?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 );

在您的HTML上：

要包含JS使用<script>标记。
id=""每页应使用一次，否则您可以使用class=""
为了理解问题的逻辑，在php将$('#drop').click链接到您的网页之前调用<a id="drop">View</a>，因此事件不会绑定到这些链接。

我为使用文件 data.php 文件的HTML做了一个快速示例，您可以根据自己的方式进行调整：

<!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>

一些解释：

$.getJSON("data.php"调用我们的新页面获取有关json格式的数据。
$.each(data, function (key, val) {获取每个项目的数据项。
$("#mytable").append(item);将行<tr>添加到我们的表<table id="mytable"
在视图链接<a href="#" class="drop" data-yazar=上，我添加了一个data-yazar属性来确定在点击功能上使用$(this).data('yazar')点击哪个链接，例如，您可以输入您的商品ID。

Answer 4

而不是回显所有HTML，关闭它上面的PHP标记?>，然后在HTML代码<?PHP之后再次打开它，HTML中的变量必须在<?=$var?>

<强>像：

<?php while ($something): ?>

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

<?php endwhile; ?>

Answer 5

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

Hense jQuery将$(".drop")接收该类。

无法在PHP中调用jQuery echo

5 个答案: