Question

我有以下javascript

function toggle_profile(source, target) {
    var ele = document.getElementById(target);
    var text = document.getElementById(source);
    if (ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "+  ";
    } else {
        ele.style.display = "block";
        text.innerHTML = "-  ";
    }
}

以下是html：

 <c:forEach items="#{inventory.categories}" var="c">
       <a id="#{c.name}" href="javascript:toggle_profile(#{c.name}, #{c.name}div);">+ </a>
<h:outputText value="   " />
       <h:commandLink action="#{inventory.getBooks(c)}" value="#{c.name}" style="font-weight: bold" />
       <br />
       <div id="#{c.name}div" style="display: none">
           <c:forEach items="#{c.subCategories}" var="s">
               <i> <h:commandLink action="#{inventory.getBooks(s)}" value="#{s.name}" />
               </i>
               <br />
           </c:forEach>
           <br />
       </div>
   </c:forEach>

文本显示成功，但+链接不执行任何操作。

Answer 1

您以错误的方式使用<h:commandLink>。首先，它没有href属性：它将由JSF生成，并且始终为#，因此实际上您的JS代码永远不会被称为。其次，它旨在通过绑定的onclick处理程序发布表单，而不是进行一些JavaScript操作。

要执行您想要的操作，只需使用纯HTML a元素，甚至是带有指定onclick处理程序的div。

Answer 2

尝试使用以下内容更改javascript函数，

function toggle_profile(source, target) {
var ele = document.getElementById(target);
var text = document.getElementById(source);
if (ele.style.display == "none") {
    ele.style.display = "block";
    text.innerHTML = "-  ";
} else {
    ele.style.display = "none";
    text.innerHTML = "+  ";      
}

}

Javascript代码无法正常工作 - 显示和隐藏div

2 个答案: