如何使用 JavaScript 获取参考元素？答案

【问题标题】：How get reference element with JavaScript?如何使用 JavaScript 获取参考元素？
【发布时间】：2014-02-03 13:34:04
【问题描述】：

我几乎没有前端开发经验，更不用说 web ui 不在我的星球上..

我需要在按钮的 onClick 事件上显示和隐藏元素的问题。技术栈是带有 PrimeFaces 的 JSF，对于我们使用 JavaScript 的脚本。

基本上 - 我如何获得对我需要显示/隐藏的元素的引用？你能告诉我为什么评论中的那行（下面）行得通吗？

function test(id, id2){
    var element =$(document).get("#testEl");
    $(element).show(); //this doesn't work??? although I get no errors executing it..
    //  $("#tab-view\\:template-form\\:testEl").show();  // <-- however this works? Why?
    $(btn).css("display", "none");
}

html:

 <p:commandButton widgetVar="edit" id="edit" value="Edit" onclick="test(this,    #testEl)" type="button"/>                              
      <p:panel widgetVar="opa" id="testEl" closable="false" visible="false"  >
      <h:panelGrid ..>....
</h:panelGrid>

</p:panel>

谢谢！

【问题讨论】：

你需要阅读文档而不是随机调用函数。
看起来你为你的元素使用了花哨的 id #tab-view:template-form:testEl。在这种情况下，您必须使用 `\\` 转义冒号。
它们在代码中被转义...
您缺少引号。应该是onclick="test(this, '#testEl')"
如果您意识到并理解 JSF 仅仅是一个 HTML 代码生成器（它在网络服务器上运行并生成一些 HTML 输出，这些输出由网络服务器发送到网络浏览器）并且 JS/jQuery 仅能工作，这一切都会变得更容易在 HTML DOM 树上（它在检索到的 HTML 输出的 webbrowser 中运行）。在浏览器中打开页面，右键单击并查看源代码。仔细看。那正是 JS/jQuery 实际看到的。换句话说，您的 JS/jQuery 代码不应基于 JSF 源代码，而应基于其生成的 HTML 输出。

标签： javascript jquery jsf primefaces

【解决方案1】：

首先，检查此 ID 在生成的 HTML 中的样子，并将其用作您的基础。如果您尝试从 JSF 命名容器（如 formId:someId）传递 ID，则必须转义冒号，否则 jQuery 会将它们视为伪选择器。根据经验，您应该始终提供命名容器 ID，这样当您看到 JSF 自动生成的 ID 并且不知道它们来自哪里时，您可以避免混淆。在这种情况下，最简单的方法是在 JS 本身中转义它。我曾经在将转义的 ID 传递给 jQuery 时遇到问题。所以设置你的点击：

onclick="test(this, 'formId:testEl')";

然后在 JS 中：

function test(id, id2) {
   id2 = id2.replace(/:/g, "\\:");
   $("#" + id2).show();
}

【讨论】：

【解决方案2】：

你只需要 $('elementid/name/class') 来引用一个元素

所以你需要做$('#testEl')

function test(){
        var element = $("#testEl");
        element.show();
        $(btn).css("display", "none");
    }

【讨论】：

我编辑了我的答案，它应该只是 element.show() 希望应该可以工作

【解决方案3】：

正如 Kuba 所建议的......引起我困惑的是 JSF 组件（将容器命名为表单和组合）“嵌套”它们的名称，基于属性 prependId 值..

所以我感兴趣的元素的客户端 ID 是 compositionID:formID:elID。我可以这样理解：

function test(btn, wv){

$(PF(wv).jqId).show();

$(btn).css("display", "none");

}

【讨论】：

【解决方案4】：

试试这个

function test(){
  $("#testEl").show();

在你的 html 中

<div id="testEl"> ... </div>

【讨论】：

【解决方案5】：

试试这个：

$(id2).show();

您必须使用传递的 id2 引用 elem 的 id。

function test(id, id2){
   $(id2).show();
    .....
}

这里 id2 是#testEl。

【讨论】：

我真的很想。我应该如何通过它？比如：onclick="test(this, #testEl)" ??

【解决方案6】：

$("#testEl").show();//you can show and hide accordingly

【讨论】：