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？

Onclick隐藏并打开所选内容

1 个答案: