ONCLICK隱藏和打開所選擇的內容

Question

有一個代碼

HTML

<a href="#" id="show_spoiler" onClick="showContent('video.php#01')">Видео 1</a> <a href="#" id="hide_spoiler" onClick="hideContent()" style="display: none">Закрыть видео</a> <div id="content"></div> <div id="loading" style="display: none">Идет загрузка...</div> 

<a href="#" id="show_spoiler" onClick="showContent('video.php#02')">Видео 2</a> <a href="#" id="hide_spoiler" onClick="hideContent()" style="display: none">Закрыть видео</a> <div id="content"></div> <div id="loading" style="display: none">Идет загрузка...</div> 

的Javascript

function showContent(link) { 
    var cont = document.getElementById('content'); 
    var loading = document.getElementById('loading'); 
     $('#hide_spoiler').css('display','block'); 
     $('#show_spoiler').css('display','none'); 
    cont.innerHTML = loading.innerHTML; 
    if(http) 
    { http.open('get', link); 
     http.onreadystatechange = function() 
     { if(http.readyState == 4) 
      { cont.innerHTML = http.responseText; } } 
     http.send(null); 
     } 
    else 
    { document.location = link; } } 
// ajax объект 
function createRequestObject() 
{ try { return new XMLHttpRequest() } 
    catch(e) 
    { try { return new ActiveXObject('Msxml2.XMLHTTP') } 
     catch(e) 
     { try { return new ActiveXObject('Microsoft.XMLHTTP') } 
      catch(e) { return null; } } } } 

    function hideContent() { 
    var cont = document.getElementById('content'); 
     $('#hide_spoiler').css('display','none'); 
     $('#show_spoiler').css('display','block'); 
    cont.innerHTML = ''; 
    } 
// ajax объект 

的問題是，按任意的按鈕中的 「開放式」 ：第一個只做出反應，在它下面顯示來自所有按鈕的內容。請幫助，對每個按鈕做什麼都是他們的內容...在此先感謝。

Answer 1

ID屬性是supposed to be unique。隨着多個響應甚至不可能遠程跨瀏覽器甚至瀏覽器版本相同。

一個更好的辦法來做到這一點是：

HTML：

<a href="#" id="show_spoiler_1" onClick="showContent('video.php#01',1)">Видео 1</a> 
<a href="#" id="hide_spoiler_1" onClick="hideContent(1)" style="display: none">Закрыть видео</a> 
<div id="content_1"></div> 
<div id="loading_1" style="display: none">Идет загрузка...</div> 

<a href="#" id="show_spoiler_2" onClick="showContent('video.php#02',2)">Видео 2</a> 
<a href="#" id="hide_spoiler_2" onClick="hideContent(2)" style="display: none">Закрыть видео</a> 
<div id="content_2"></div> 
<div id="loading_2" style="display: none">Идет загрузка...</div> 

JS：

function showContent(link,ref) { 
    var cont = document.getElementById('content_' + ref); 
    var loading = document.getElementById('loading_' + ref); 
     $('#hide_spoiler_' + ref).css('display','block'); 
     $('#show_spoiler_' + ref).css('display','none'); 
    cont.innerHTML = loading.innerHTML; 
    if(http) 
    { http.open('get', link); 
     http.onreadystatechange = function() 
     { if(http.readyState == 4) 
      { cont.innerHTML = http.responseText; } } 
     http.send(null); 
     } 
    else 
    { document.location = link; } } 
// ajax объект 
function createRequestObject() 
{ try { return new XMLHttpRequest() } 
    catch(e) 
    { try { return new ActiveXObject('Msxml2.XMLHTTP') } 
     catch(e) 
     { try { return new ActiveXObject('Microsoft.XMLHTTP') } 
      catch(e) { return null; } } } } 

    function hideContent(ref) { 
    var cont = document.getElementById('content_' + ref); 
     $('#hide_spoiler_' + ref).css('display','none'); 
     $('#show_spoiler_' + ref).css('display','block'); 
    cont.innerHTML = ''; 
    } 

我很好奇，爲什麼你正在使用AJAX複雜的查詢，而不是的jQuery很簡單AJAX calls？