1. 项目中,进行分页查看的时候,打算使用struts标签iterator来遍历输出数据,并在遍历中比较其当前页来为当前页的链接添加class="active"样式来着色显示。
<s:iterator value="listPage" var="index" > <s:if text="index != currentPage"> <li> <a href='<s:url action="admin-depart"><s:param name="currentPage" value="index"/></s:url>'> ${index} </a> </li> </s:if> <s:elseif> <li class="currentPage"> <a href='<s:url action="admin-depart"><s:param name="currentPage" value="index"/></s:url>'> ${index} </a> </li> </s:elseif> </s:iterator>
其中listPage是List<Integer> currentPage是int ,两个都是action里的栈值。
但是结果都是不相等的情况,没办法,只能在使用js来控制了
2. 首先把jsp的代码改了一下
<ul id="pageInation"> <s:iterator value="listPage" var="index" > <li> <a href='<s:url action="admin-depart"><s:param name="currentPage" value="index"/></s:url>'> ${index} </a> </li> </s:iterator> </ul>
3. 现在问题来了,我该怎么在ul里遍历li并获取到a的文本来与currentPage来比较,然后为其添加class呢。
在jQuery有一个children,还有一个filter。代码如下
<script type="text/javascript"> (function($){ $('#pageInation').children('li') .filter( function(index){ var str = $('a',this).text().trim(); return str == ${currentPage}; } ).addClass("active") ; })(jQuery); </script>
首先通过id选择器来获取到ul节点,然后再使用children来选择到ul下的子节点li。
关键的地方来了,使用filter来过滤掉不符合的li。
在filter中,可以直接使用选择器来,也可以传入function参数,我就是把一个function函数传入进去 ,只要filter返回的是true,接下来的addClass就会执行。
而${currentPage}是struts2 的OGNL表达式,获取currentPage。
这一堆代码是放在一个立即执行的js匿名函数中,其结构如下
(function(a){ //do somthing })(a);
4. 举个例子,比如在向页面新添加一个<p>,并对其进行click事件监听,使它在鼠标点击后隐藏。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).slideToggle(); }); $("button").click(function(){ $("<p>This is a new paragraph.</p>").insertAfter("button"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>点击任意 p 元素会令其消失。包括本段落。</p> <button>在本按钮后面插入新的 p 元素</button> <p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p> </body> </html>
但是在运行后,却发现是没有反应的。我想,这是因为click方法监听的只是原有页面载的节点点击事件,比如把上面改成这样
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).slideToggle(); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>点击任意 p 元素会令其消失。包括本段落。</p> <p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p> </body> </html>
可以看到,事件监听是有反应的。那问题来了,我们如何对未来新添加的DOM节点进行事件监听呢
答案是 在jquery-1.7——1.9之间使用live,之后的就要使用on来对其未来新节点监听,因为在jquery-1.9 之后就把live 移除掉了,再次使用会报错无法运行js代码的。
但是,改成这样子后,发现还是出现了点问题,新节点点击监听还是没有反应
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").on("click",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("<p>This is a new paragraph.</p>").insertAfter("button"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>点击任意 p 元素会令其消失。包括本段落。</p> <button>在本按钮后面插入新的 p 元素</button> <p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p> </body> </html>
思考无果,无奈度娘,找到了网友fhq198604 的百度知道答案jquery on()绑定的点击事件在js动态新添加的元素上无效,请问为什么 。
答案中,解释是因为,我们在对新添加的节点监听事件的时候,其选择器应该是要选择document,即应该使用$(document)来对其节点选择,修改如下
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ <!-- 修改的地方 --> $(document).on("click","p",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("<p>This is a new paragraph.</p>").insertAfter("button"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>点击任意 p 元素会令其消失。包括本段落。</p> <button>在本按钮后面插入新的 p 元素</button> <p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p> </body> </html>
5. 在这里贴上官方解释jQuery on()