切换一组结果中的每个按钮

Question

我的搜索脚本使用 while 从 MySQL 中列出了 10 个 MP3 结果。我想在用户单击 "play" 按钮时打开一个播放器，然后将文本更改为 "stop"。

以下脚本中的所有内容都运行良好，但仅适用于第一个结果。如果我点击其他结果，它们只会播放第一个结果。如何切换所有搜索结果上的 "play/stop" 按钮？

Javascript:

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("player");
    var text = document.getElementById("playtext");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Play";
    } else {
        ele.style.display = "block";
        text.innerHTML = "Stop";
    }
}
</script>

PHP:

 if(mysql_num_rows($raw_results) > 0){     
    while($results = mysql_fetch_array($raw_results)) {
        $title = $results['title'];
        $download = $results['url'];
        $album = $results['album'];
        $size = $results['size'];

        echo '<div id="song_html">';
            echo '<div class="left">';
                echo $size;
            echo '</div>';

            echo '<div id="right_song">';
                echo '<div style="font-size:15px;"><b>'.$title.'</b></div>';
                echo '<div style="font-size:12px;"><b>Movie : <a href=search.php?search='.urlencode($album).'><font color="blue">'.$album.'</font></a></b></div>';
                echo '<div style="float:left; height:27px; font-size:13px; padding-top:2px;">';
                    echo '<div style="float:left; height:27px; font-size:13px; padding-top:2px;"><b><a href='.$download.'><font color="green">Download</font></a></b></div>';
                echo '</div>';  

                echo '<a id="playtext" href="javascript:toggle();">Play</a>';
                echo '<div id="player"><h1>Player</h1></div>';
            echo '</div>';

        echo '</div>';
    }
}

CSS:

#playtext
{
    padding-left:10px;
    float:left; 
    height:27px; 
    font-size:13px; 
    padding-top:4px;
}

#player
{
    display: none;
}

Answer 1

如前所述，ID 导致出错。 Javascript 检测到多个，它只会检测第一个匹配项。

如果您要使用 jQuery，我推荐它，制作 ID，类。

然后，在 $(document).ready(function() {}); 中，您可以创建一个 $(".the_class").on("click", function(){}); 并在其中插入您需要的开关。

切换一组结果中的每个按钮

Toggle each button in a set of results

javascript

php

toggle