Question

我正在尝试更改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>

Answer 1

简而言之，您将必须保持所有按钮的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>

更改元素ID的脚本会影响其他两个元素（JavaScript）

1 个答案: