Question

我刚刚通过w3schools教程获取JQuery。我正在尝试在seam / richfaces app中编写一个函数。我有一个搜索图标和搜索图标的onclick，我想在UI中切换某些字段。但没有任何反应，我没有看到萤火虫有任何错误。请帮忙。

<rich:dataTable id="acctListTbl" value="#{accounts}" var="account" width="100%">
    <rich:column>
   <f:facet name="header">
    <h:panelGroup>
         <h:graphicImage id="srchIcon" value="/images/search_icon.png" 
                             styleClass="search-icon"/> 
            <h:outputText value="Action" />
        </h:panelGroup>
   </f:facet>

 <script type="text/javascript">
    jQuery(document).ready(function(){
  jQuery("#acctListTbl:srchIcon").click(function(){
      jQuery('.search-field').toggle(); 
  });
 });
 </script>

这是html。正如user914670指出的那样，我的搜索图标渲染中没有添加jquery处理程序。那有什么不对？

 <div id="j_id12:acctListTbl:j_id31header:sortDiv">
    <img id="j_id12:acctListTbl:srchIcon" class="search-icon"  
         src="/xxxx/images/search_icon.png">
         Action
 </div>

Answer 1

标记中没有类.search-field

Answer 2

我的理解是，当你使用冒号跟随一个类或一个id时，你正在寻找具有特定属性的元素，而srchIcon不是一个属性。

我相信你对 jQuery（'＃acctListTbl：srchIcon'）的意图如下：
jQuery（'＃acctListTbl #srchIcon）

这就是说目标是一个ID为srchIcon的元素，其内容是一个ID为acctList的元素。

这可能是你问题的一部分。

希望有所帮助。

Answer 3

jQuery("#acctListTbl:srchIcon")只需jQuery("#srchIcon")

因为id在页面上是唯一的，所以它们不需要被限定。另一种判断Jquery是否甚至创建事件处理程序的简单方法是查看渲染的代码并查看您的图像是否具有JQuery="{some random numbers}"标记。

Answer 4

jQuery(document).ready(function(){   
      jQuery(".search-icon").click(function(){       
              jQuery('.search-field').toggle();    
       });  
});

或者如果你喜欢ids，你可以做到

jQuery(document).ready(function(){   
      jQuery("[id$=srchIcon]").click(function(){       
              jQuery('.search-field').toggle();    
       });  
});

$ =表示以

结尾

^ =表示以

开头

* =表示包含

另外，我会查看SelectorGadget以便在Firefox中使用。它非常适合找到获取某个元素所需的选择器语句。

我做的最后一件事就是确保我处于事件的一边，然后在函数旁边放置一个警告声明，让我知道我的select语句是正确的。

基本的jquery问题

4 个答案: