Onclick隐藏并打开所选内容(Onclick hiding and open the selected content)

Onclick隐藏并打开所选内容(Onclick hiding and open the selected content)

有一个代码

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 объект

问题是按下任何按钮“打开”：第一个只做出反应，在它下面显示所有按钮的内容。 请帮助，对每个按钮做什么都是他们的内容...提前谢谢。

There is a code

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 объект

The problem is that pressing any of the buttons "open": the first only reacts and under it displays content from all the buttons. Help please, what to do to each button are their content ... Thanks in advance.

最满意答案

ID属性应该是唯一的 。 有多个响应甚至不太可能是远程跨浏览器甚至浏览器版本相同。

更好的方法是：

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调用 ？

ID attributes are supposed to be unique. With multiple the response is not even very likely to be remotely cross browser or even browser version the same.

A better way to do that would be:

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

I'm curious as to why you are using that complicated AJAX query instead of the jQuery nice simple AJAX calls?