更改元素ID的脚本会影响其他元素2 (JavaScript)
更改元素ID的脚本会影响其他元素2 (JavaScript)
提问于 2018-07-30 03:04:58
我正在尝试更改DIV的ID以折叠/扩展它，我的方法工作得很好，直到我添加了不止一个。如果我这样做了，并且我展开了第一个图像，IsCollapsed将更改为false，即使第一个第二个图像仍然是折叠的。这意味着必须单击该按钮两次。我知道这是一个逻辑问题，但我想不出一个解决方案。有谁有什么想法吗？
这是一个指向实际内容的链接：http://meet-cristian.com/Projects/webfaction.html
<script>
var IsCollapsed = true;
function Expand(ButtonID,CollapsedID,ExpandedID){
if (IsCollapsed == true){
// IsCollapsed = false;
document.getElementById(CollapsedID).id = ExpandedID;
document.getElementById(ButtonID).innerText = '[-] Collapse Image';
} else {
// IsCollapsed = true;
document.getElementById(ExpandedID).id = CollapsedID;
document.getElementById(ButtonID).innerText = '[+] Expand Image';
}
}
</script>
<div class="project-image" id="webfaction-03"></div>
<button type="button" class="expand" id="expand-01" onclick="Expand('expand-01', 'webfaction-03', 'webfaction-03-expanded'); IsCollapsed = !IsCollapsed;">[+] Expand Image</button>
<div class="project-image" id="webfaction-04"></div>
<button type="button" class="expand" id="expand-02" onclick="Expand('expand-02', 'webfaction-04', 'webfaction-04-expanded'); IsCollapsed = !IsCollapsed;">[+] Expand Image</button>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-30 03:15:25
简而言之，您必须维护所有按钮的IsCollapsed状态。这可以通过维护一个以按钮ID作为键的对象来完成。
var ref = {};
function Expand(ButtonID, CollapsedID, ExpandedID) {
if (typeof ref[ButtonID] === 'undefined') {
ref[ButtonID] = true
}
if (ref[ButtonID] == true) {
ref[ButtonID] = false;
document.getElementById(CollapsedID).id = ExpandedID;
document.getElementById(ButtonID).innerText = '[-] Collapse Image';
} else {
ref[ButtonID] = true;
document.getElementById(ExpandedID).id = CollapsedID;
document.getElementById(ButtonID).innerText = '[+] Expand Image';
}
}<div class="project-image" id="webfaction-03"></div>
<button type="button" class="expand" id="expand-01" onclick="Expand('expand-01', 'webfaction-03', 'webfaction-03-expanded');">[+] Expand Image</button>
<div class="project-image" id="webfaction-04"></div>
<button type="button" class="expand" id="expand-02" onclick="Expand('expand-02', 'webfaction-04', 'webfaction-04-expanded');">[+] Expand Image</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51583611
复制相关文章
相似问题