2012-03-04 49 views
0

我有一個代碼,允許我點擊它們時將某些「缺席者」以及他們的ID通過隱藏表單添加到缺席名單。當我再次點擊它時,「缺席者」將從缺席名單中刪除。然而,當我再次點擊它時,該列表似乎進一步延伸,因爲我的代碼中存在br ,並且隱藏的表單值似乎沒有被刪除。我需要刪除隱藏值,以便從列表中刪除的缺席者不會被記錄在數據庫中。我需要br ,這樣缺席者列表纔會顯現。刪除隱藏值和<br>通過.html替換時通過.html

這裏是我的代碼:http://jsfiddle.net/gk5pV/8/

回答

1

我竭誠與@charlietfl同意,只使用一個塊級元素。另外,使用一個隱藏的輸入來跟蹤你的缺席者。​​3210,代碼如下:

$(function() { 
    $("td").click(function() { 
     var $this = $(this); 
     var user = $this.attr('id'); 
     var p = $('<p />').attr('user', user).text($this.text()); 
     var absentees = []; 
     if ($('#absentees').val().length > 0) { 
      absentees = $('#absentees').val().split(',') 
     } 
     if ($(this).hasClass('on')) { 
      //console.log("Already marked absent"); 
      //remove from collection 
      $("#collect").children('p[user="' + user + '"]').remove(); 
      absentees.splice(absentees.indexOf(user), 1); 
     } 
     else { 
      //console.log(user); 
      //add to collection 
      $("#collect").append(p); 
      absentees.push(user); 
     } 
     $this.toggleClass('on'); 
     $('#absentees').val(absentees.join(',')); 
    }); 

    $("#clicky").click(function() { 
     $('td').removeClass('on'); 
     $("#collect").empty(); 
     $('#absentees').val(''); 
    }); 
});​ 
+0

這一個工程。在使用之前,我會先嚐試理解代碼。新手jquery用戶在這裏:D。謝謝! – user1056998 2012-03-04 15:35:13

+0

順便說一句,我試圖爆炸缺席,但它總是顯示「陣列」。任何想法? – user1056998 2012-03-04 16:00:38

+0

「爆炸」缺席者是什麼意思? – pete 2012-03-04 18:46:28

0

解決方案是非常簡單的。將要附加的文本和隱藏的輸入封裝在塊級元素(div,p,li等)中,並且不需要<br標記。當你從列表中刪除缺席者時,你刪除了塊元素,輸入將成爲它的一部分,因此它將不再存在。如果你給新的塊級元素的類名您可以將事件處理程序簡單地附加到類

+0

但是,清單的刪除工作,通過隱藏窗體的隱藏ID仍然被張貼到下一頁。 – user1056998 2012-03-04 14:10:12

+0

例如沒有''
使用無序列表http://jsfiddle.net/mK8Dr/ – charlietfl 2012-03-04 14:36:30

+0

已經固定在沒有
PA – user1056998 2012-03-04 14:47:40