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

时间:2015-01-29 08:42:50

标签: javascript php toggle

我的搜索脚本使用while列出了MySQL的10个MP3结果。我想在用户点击“播放”按钮时打开播放器,然后将文本更改为“停止”。

以下脚本中的每个东西都运行良好,但它仅适用于第一个结果。如果我点击其他结果,他们只播放第一个结果。如何在我的所有搜索结果中切换“播放/停止”按钮?

使用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;
}

1 个答案:

答案 0 :(得分:0)

如前所述,身份证正在让它出错。 Javascript检测到多个,它只会在第一场比赛时使用。

如果你要使用jQuery,我推荐它,制作ID,类。

然后,在$(document).ready(function() {});内,你可以创建一个$(".the_class").on("click", function(){});并在那里插入你需要的切换。