如何使用循环打印按钮并让它在每次打印时执行不同的功能？

Question

我正在从我的数据库中打印数据。 对于数据库中的每一行，都会打印一个包含该信息的新容器。 每个容器都包含一个执行多读/少读功能的按钮。

我的问题是：第二/第三/第四个容器上的按钮正在改变第一个容器的文本而不是它们自己的文本。 我是否可以让每个按钮只改变它自己的容器文本。

'''

                    $sqls = "SELECT * FROM module_rating WHERE username='$name'";
                    $results = mysqli_query($conn, $sqls);
                    $queryResultss = mysqli_num_rows($results);
                    if ($queryResultss > 0) {
                        while ($row = mysqli_fetch_assoc($results)) {

                            echo "
                            <div class='wrapper'>

                            <div class='profileinfo'>

                             <h3>Module ".$row['Mod_Name']." </h3>
                            <h4> ".$row['Mod_Code']."</h4>
                            <h4> Your Rating </h4>
                            <p><b>Overall:</b> ".$row['Overall_rating']." Stars </p>
                            <p><b>Overall Comment:</b></br>
                            ".$row['Overall_comment']." </p>

                                <span id='dots'>...</span><span id='more'> <i class='fa fa-angle-right'></i>
                                <p>Workload: ".$row['Workload_rating']." Stars </p>
                            <p>Workload Comment: </p>
                                </span>

                            <button type='button' id='read' onclick='read()'> More</button>

爪哇脚本

    var i=1;
    function read() {

    if(!i){
    document.getElementById("more").style.display ="inline";

    document.getElementById("dots").style.display ="none";

    document.getElementById("read").innerHTML="Read Less";
    i=1;
    }
    else {
    document.getElementById("more").style.display ="none";

    document.getElementById("dots").style.display ="inline";

    document.getElementById("read").innerHTML="Read More";
    i=0;
    }
    }

Answer 1

尝试为每个项目包含一个 id

<span id='dots-". $row['id'] ."' >
<span id='more-". $row['id'] ."' >
<span id='read-". $row['id'] ."' >   

<button type='button' id='read' onclick='read(".$row['id'].")'> More</button>

并将 id 传递给 javascript 函数

function read(id) {...