[英]Javascript hiding and showing dynamic content of a div
Currently I hide and show the content of a div like this: 目前我隐藏并显示div的内容,如下所示:
var header = null;
var content = null;
var mainHolder = null;
var expandCollapseBtn = null;
var heightValue = 0;
header = document.getElementById("header");
content = document.getElementById("content");
mainHolder = document.getElementById("mainHolder");
expandCollapseBtn = header.getElementsByTagName('img')[0];
heightValue = mainHolder.offsetHeight;
header.addEventListener('click', handleClick, false);
mainHolder.addEventListener('webkitTransitionEnd',transitionEndHandler,false);
function handleClick() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
mainHolder.style.height = "26px";
content.style.display = "none";
}
else
{
mainHolder.style.height = heightValue + "px";
}
}
function transitionEndHandler() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
expandCollapseBtn.src = "expand1.png";
}
else{
expandCollapseBtn.src = "collapse1.png";
content.style.display = "block";
}
}
This is fine if the content is static, but I'm trying to populate my div dynamically like so. 如果内容是静态的,这很好,但我试图像这样动态填充我的div。
This is called from an iphone application and populates the div with a string. 这是从iphone应用程序调用并用字符串填充div。
var method;
function myFunc(str)
{
method = str;
alert(method);
document.getElementById('method').innerHTML = method;
}
I store the string globally in the variable method. 我将字符串全局存储在变量方法中。 The problem I am having is now when I try expand the div I have just collapsed there is nothing there.
我遇到的问题是,当我尝试扩展div时,我刚刚崩溃,那里什么都没有。 Is there some way that I could use the information stored in var to repopulate the div before expanding it again?
是否有某种方法可以使用存储在var中的信息重新填充div,然后再将其展开? I've tried inserting it like I do in the function but it doesn't work.
我已经尝试插入它,就像我在函数中一样,但它不起作用。
Does anyone have any ideas? 有没有人有任何想法?
to replicate: 复制:
Here is the jsfiddle. 这是jsfiddle。 jsfiddle.net/6a9B3 If you type in text between here
jsfiddle.net/6a9B3如果您在此处输入文字
If the only way to fix this is using jquery I dont mind going down that route. 如果解决这个问题的唯一方法是使用jquery,我不介意沿着那条路走下去。
is it working in other browsers? 它在其他浏览器中工作吗?
can you jsfiddle.net for present functionality because it is hard to understand context of problem in such code-shoot... 你可以jsfiddle.net目前的功能,因为在这样的代码拍摄中很难理解问题的背景...
there are tonns of suggestions :) but I have strong feeling that 有很多建议:)但我有强烈的感觉
document.getElementById('method')
returns wrong element or this element not placed inside mainHolder 返回错误的元素或未放在mainHolder中的此元素
update : after review sample in jsfiddle 更新 : 在jsfiddle中查看示例之后
feeling about wrong element was correct :) change 'method' to 'info' 感觉错误的元素是正确的:)改变'方法'到'信息'
document.getElementById('method') -> document.getElementById('info')
我想你想在myFunc中使用document.getElementById(' content ')而不是document.getElementById('method')。
I really see nothing wrong with this code. 我觉得这段代码没什么问题。 However, a guess you could explore is altering the line
content.style.display = "none";
但是,您可以探索的猜测是改变行
content.style.display = "none";
It might be the case that whatever is displaying your html ( a webview or the browser itself) might be wiping the content of the elemtns, as the display is set to none
可能是这样的情况,显示你的html(webview或浏览器本身)可能正在擦除elemtns的内容,因为显示设置为
none
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.