Question

我想知道如何为javascript中的一组变量定义更大的变量：showFootnotesPanel();，showReferencesPanel();，showImagesPanel();，{{ 1}}。

会是这样的吗？

showInformationPanel();

更新

我有这个功能，用于打开右侧的侧面板并为内容着色：

function showPanel() {
  var x = [showFootnotesPanel();showReferencesPanel();showImagesPanel();showInformationPanel();]
}

现在我有4个侧面板需要响应相同的脚本，我认为通过定义类似var els = document.getElementsByClassName('change-color'), target = document.getElementsByClassName('resources'), changeColor = function(a) { elements = document.getElementsByClassName("note"); for (var i = 0; i < elements.length; i++) { console.log(elements[i]) elements[i].style.backgroundColor = ""; } target = a.getAttribute('href'); element = document.querySelector('[data-id="' + target.substring(1, target.length) + '"]'); element.style.backgroundColor = a.getAttribute('data-color'); }; for (var i = els.length - 1; i >= 0; --i) { els[i].onclick = function() { showFootnotesPanel(); changeColor(this); }的内容showPanel()或showFootnotesPanel()或showReferencesPanel()或showImagesPanel()我可能会简化一些事情，因此脚本的最后一行只是：

showInformationPanel()

更新2：

或者是否可以使用逻辑运算符els[i].onclick = function(){showPanel();changeColor(this);}执行此操作？

OR

更新3：

这是我用来隐藏和显示面板的新脚本：

els[i].onclick = function(){showFootnotesPanel(); || showReferencesPanel(); || showImagesPanel(); || showInformationPanel();changeColor(this);}

这是调用面板并突出显示文本的脚本：

function showPanel(myPanel) {
  var elem = document.getElementById(myPanel);
  if (elem.classList) {
    console.log("classList supported");
    elem.classList.toggle("show");
  } else {
    var classes = elem.className;
    if (classes.indexOf("show") >= 0) {
      elem.className = classes.replace("show", "");
    } else {
      elem.className = classes + " show";
    }
    console.log(elem.className);
  }
}


function hideOthers(one, two, three, four) {
  if (one > "") {
    var elem1 = document.getElementById(one);
    var classes = elem1.className;
    elem1.className = classes.replace("show", "");
  }
  if (two > "") {
    var elem2 = document.getElementById(two);
    var classes = elem2.className;
    elem2.className = classes.replace("show", "");
  }
  if (three > "") {
    var elem3 = document.getElementById(three);
    var classes = elem3.className;
    elem3.className = classes.replace("show", "");
  }
  if (four > "") {
    var elem4 = document.getElementById(four);
    var classes = elem4.className;
    elem4.className = classes.replace("show", "");
  }
  return;
}

谢谢！

Answer 1

更新了最终解决方案。

在javascript中，您可以通过这种方式声明变量：

var text = ""; // String variable.
var number = 0; //Numeric variable.
var boolValue = true; //Boolean variable.
var arrayValue = []; // Array variable. This array can contain objects {}.
var obj = {}; // Object variable.

检查此版本的代码。

// var text = "";            => String variable.
// var number = 0;           => Numeric variable.
// var boolValue = true;     => Boolean variable.
// var arrayValue = [];      => Array variable. This array can contain objects {}.
// var obj = {};             => Object variable.

// This section of code is only to explain the first question.
(function() {
  function showFootnotesPanel() {
    return 10; // Random value.
  }

  function showReferencesPanel() {
    return 30; // Random value.
  }

  function showImagesPanel() {
    return 50; // Random value.
  }

  function showInformationPanel() {
    return 90; // Random value.
  }

  function showPanel() {
    return [
      showFootnotesPanel(), // Index = 0
      showReferencesPanel(), // Index = 1
      showImagesPanel(), // Index = 2
      showInformationPanel() // Index = 3
    ];
  }

  var bigVariable = showPanel(); // bigVariable is array of numeric values.

  // Using logical operator to check status of variable about this demo code.
  if (bigVariable[0] === 10 || bigVariable[1] === 30) {
    console.log("Hey, with these values can show the FootnotesPanel and ReferencesPanel.");
  } else {
    console.log("With the current values can't show anything...");
  }

  console.log(bigVariable);
})();



// https://jsfiddle.net/dannyjhonston/t5e8g22b/
// This section of code attempts to answer the question of this post.
(function() {
  // This function can be executed when the page is loaded.
  function showPanel(panels) {
    var panel, panelVisible = "";
    var selPanels = document.getElementById("selPanels");

    // In panels array...
    for (var i = 0; i < panels.length; i++) {
      // panels[0] = "ReferencesPanel";
      panel = document.getElementById(panels[i]); // Get in the DOM tag context of the panel to set in the variable "panel".
      panelVisible = panel.getAttribute("data-visible"); // HTML5 data attribute.
      if (panelVisible == "true") {
        panel.setAttribute("class", "show");
      } else {
        panel.setAttribute("class", "hide");
      }
    }
  }

  // This function is for set panel visibilty.
  function setPanel(panelId, status) {
    panel = document.getElementById(panelId);
    panel.setAttribute("data-visible", status);

    // Calling the showPanel function to check in the DOM.
    showPanel(["ReferencesPanel", "InformationPanel", "ImagesPanel", "FootnotesPanel"]);
  }

  // Binding the change event to the select tag.
  selPanels.addEventListener("change", function() {
    // Executes setPanel function with panelId and true to update the data-visible attribute in the DOM.
    setPanel(this.options[this.selectedIndex].value, "true");
  });


  // Executes showPanel function with array argument with panels Id. You need to specify every panel that want to handle.
  showPanel(["ReferencesPanel", "InformationPanel", "ImagesPanel", "FootnotesPanel"]);
})();

#global {
  border: solid 1px #6291AD;
}
.tools {
  background-image: linear-gradient(#FFFFFF, #8999CE);
}
#global div[data-visible] {
  height: 80px;
  padding: 5px 0;
}
#global div p {
  padding: 10px;
}
#ReferencesPanel {
  background-image: linear-gradient(#FFFFFF, #FD9A9A);
  float: left;
  width: 20%;
}
#InformationPanel {
  background-image: linear-gradient(#FFFFFF, #A1C7F1);
  float: left;
  width: 80%;
}
#ImagesPanel {
  background-image: linear-gradient(#C6E9FB, #FFF);
  width: 100%;
}
#FootnotesPanel {
  background-image: linear-gradient(#C6E999, #FFF);
  width: 100%;
}
.clear {
  clear: both;
}
.show {
  display: block;
}
.hide {
  display: none;
}

<div id="global">
  <div class="tools">Show Panel:
    <br />
    <!-- Demo -->
    <select id="selPanels">
      <option value="">[SELECT]</option>
      <option value="ReferencesPanel">ReferencesPanel</option>
      <option value="InformationPanel">InformationPanel</option>
      <option value="ImagesPanel">ImagesPanel</option>
      <option value="FootnotesPanel">FootnotesPanel</option>
    </select>
  </div>
  <!-- You need to set data-visible attribute with true or false to show or hide a panel. -->
  <div id="ReferencesPanel" data-visible="false">
    <p>References Panel</p>
  </div>
  <div id="InformationPanel" data-visible="false">
    <p>Information Panel</p>
  </div>
  <div class="clear"></div>
  <div id="ImagesPanel" data-visible="false">
    <p>Images Panel</p>
  </div>
  <div id="FootnotesPanel" data-visible="false">
    <p>Foot notes Panel</p>
  </div>
</div>

Answer 2

我完全不明白你的问题，但是如果你想定义一个包含其他变量的变量，你可以使用一个对象。

e.g：

@Override
public void onDestroyView(){
    super.onDestroyView();
    mFragmentContainer.removeView(mEmptyListView);
}

如何在JavaScript中定义多个变量的变量

2 个答案: