Question

我是Jquery编码的学习者，我的任务是在点击 SPAN 元素时显示/隐藏 TABLE 元素。我尝试使用下面提到的Jquery代码，但是没有用。

HTML代码为：

foreach($array as $key => $arrValue) {
  <span id="link<?=$count?>">$key</span>
    <table id="tbl<?=$count?>">

      foreach($arrValueas $key => $value) {
           <tr><td>$value</td></tr>
      }
   </table>
}

我的Jquery代码是：

$(function(){
   // To open/close field's group div
   $("span").each(function (i){
      i++;
      $('#link' + i).click(function (i) {
          $('#tbl' + i).toggle(800);
      });
   });
});

请避免PHP代码中的PHP打开关闭标记问题..

Answer 1

$("span").each(function (){ 
    $(this).click(function () { 
        $(this).next('table').toggle(800); 
    }); 
});

Answer 2

试试这个

$(function(){
   $("span").each(function (i){

      (function(i) {

          $('#link' + i).click(function() {
              $('#tbl' + i).toggle(800);
          });

      }(i));

   });
});

您不需要使用i++增加变量oyherwise，您不会在预期的link元素上设置处理程序。 Each()已经在增加变量i

Answer 3

尝试这种方式匹配两个不同的元素组：

Here is jsFiddle.

var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');

thumbs.click(function() {
    var target = $(this).index();
    bigImg.each(function(i){
        if( i != target){
            $(this).fadeOut(300);
        }else{
            $(this).fadeIn(300);
        }
    });    
});

通过jquery在循环中显示隐藏元素表元素

3 个答案: