검색 결과의 각 버튼을 토글합니다.

내 검색 스크립트에는 while을 사용하여 MySQL의 10 개의 MP3 결과가 표시됩니다. 사용자가 "재생"버튼을 클릭 한 다음 텍스트를 "중지"로 변경하면 플레이어를 열려고합니다.검색 결과의 각 버튼을 토글합니다.

다음 스크립트에서는 모든 것이 올바르게 작동하지만 첫 번째 결과에만 적용됩니다. 다른 결과를 클릭하면 첫 번째 결과 만 재생합니다. 내 모든 검색 결과에서 '재생/정지'버튼을 어떻게 전환 할 수 있습니까?

자바 스크립트 :

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

출처

2015-01-29 Higginslpert

같은 이름의 ID가 여러 개 있으면 JavaScript로 문제가 발생합니다. 할 수 있으면 jQuery와 함께 할 것을 권합니다. – Cheshire

MySQL은 공식적으로 사용되지 않습니다. 대신 Mysqli 또는 PDO를 사용하십시오 .. – Matheno

다른 노래를 구별 할 수있는 카운터 등을 추가하십시오. toggle() 함수에서 고유 ID를 사용하십시오. – RST

전에 말한 것처럼, ID 그것이 잘못되게 만들고있다. Javascript가 둘 이상을 검색하면 첫 번째 일치 항목 만 찾습니다.

jQuery와 함께한다면 ID 클래스를 만드는 것이 좋습니다.

그런 다음 $(document).ready(function() {}); 안에 $(".the_class").on("click", function(){});을 만들고 필요한 것을 토글 할 수 있습니다.

출처

2015-01-29 09:45:41 Cheshire

검색 결과의 각 버튼을 토글합니다.

답변

관련 문제