jQuery：只有當子元素沒有被點擊時，如何將效果應用於父元素？

我試圖創建一個「就地編輯」表格單元格。您點擊一個編輯鏈接，並在其位置顯示一個文本區域。當我將鼠標懸停在表格行上時，我也只想顯示編輯鏈接。我遇到的問題是，當您將鼠標懸停在表格行上時，編輯鏈接始終顯示。我怎樣才能讓它隱藏/顯示，只發生在你目前沒有編輯的時候。jQuery：只有當子元素沒有被點擊時，如何將效果應用於父元素？

HTML：

<td><a class="edit">Edit</a> $100</td>

的jQuery：

$(document).ready(function(){ 

    $('a.edit').hide(); 

    $('tr').hover(
     function(){ 
      $(this).find('a.edit').show(); 
     }, 
     function(){ 
      $(this).find('a.edit').hide(); 
     } 
    ); 

    $('a.edit').click(function(e){ 
     e.preventDefault(); 
     $(this).hide(); 
     $(this).after('<input type="text" style="width:100%;" />'); 
    }); 
});

來源

2010-10-19 Andrew

你想如何退出編輯模式？ – 2010-10-19 19:43:22

在CSS我可能會做hover。沒有必要在那裏的JavaScript。如果您需要使用此功能來支持IE6，我會使JavaScript有條件。

然後，當您創建<input>時，將類添加到click()處理程序中的<tr>。該CSS可以保持該鏈接隱藏在<tr>與類。

例子：http://jsfiddle.net/gmS46/

CSS

tr a.edit { 
    display:none; 
} 
tr:hover a.edit { 
    display:inline; 
} 
tr.hasInput a.edit { 
    display:none; 
}

jQuery的

$(document).ready(function(){ 
    $('a.edit').click(function(e){ 
     e.preventDefault(); 
     $(this).after('<input>').closest('tr').addClass('hasInput'); 
    }); 
});

來源

2010-10-19 19:48:44 user113716

我喜歡用CSS做懸停效果的想法，因爲它不一定與javascript相關。如果javascript被禁用，懸停效果仍然會發生。 – Andrew 2010-10-20 17:12:02

我也意識到如果我隱藏JavaScript的鏈接（因爲它應用display：none樣式內聯），我不需要向該表格行添加一個類。 – Andrew 2010-10-20 17:15:34

@安德魯 - 非常真實。：O） – user113716 2010-10-20 17:26:27

使用在懸停功能的變量，在編輯模式下時，其控制。

例如，您可以使用條件驗證$（'input'，）。length> 0。

也就是說驗證它是否已經存在輸入字段。

這裏有我說的話： http://jsfiddle.net/dactivo/L4zZw/

來源

2010-10-19 19:46:23 netadictos

不是直接回答你的問題，但我已經使用Jeditable與成功的過去完成同樣的事情：http://www.appelsiini.net/projects/jeditable

來源

2010-10-19 19:51:11 mpdonadio

件

事情變得如果您的電池是更簡單的是這樣的：

<td><a class="edit" href="#">Edit</a><span>$100</span></td>

JavaScript的需要：

$('tr').hover(
     function(){ 
      $(this).find('a.edit').show(); 
     }, 
     function(){ 
      var $a = $(this).find('a.edit'); 
      if (!$a.next().is('input')) 
       $a.hide(); 
     } 
    ); 

$('a.edit').click(function(){ 
    var $next = $(this).next(); 
    if ($next.is('input')){ 
     $('<span>').html($next.val()).replaceAll($next); 
    } else { 
     $('<input>').val($next.html()).replaceAll($next).focus(); 
    } 
    return false; 
});

您可以檢查此live jsFiddle example。

來源

2010-10-19 20:09:53

jQuery：只有當子元素沒有被點擊時，如何將效果應用於父元素？

回答

相關問題