代码之家 › 专栏 › 技术社区 › CristianMoisei

更改元素ID的脚本会影响其他元素2(JavaScript)

jquery javascript

CristianMoisei · 技术社区 · 6 年前

我正在尝试将DIV的ID更改为折叠/扩展它,并且我的方法工作得很好,直到我添加了多个DIV。如果我这样做,并且我展开第一个图像,is collapsed将变为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 回复 | 直到 6 年前

Rayon 6 年前

总之,你必须保持 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>