幫助使用jQuery選擇正確的元素

Question

我有以下HTML：

<div class="result-row odd"> 
<div class="domain-name">first-domain.com</div> 
<div class="domain-functions"> 
    <a onclick="deleteDomain(1)" href="javascript:void(0);"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a onclick="editDomain(1)" href="javascript:void(0);"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

    <div class="result-row even"> 
<div class="domain-name">second-domain.com</div> 
<div class="domain-functions"> 
    <a onclick="deleteDomain(2)" href="javascript:void(0);"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a onclick="editDomain(2)" href="javascript:void(0);"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

我想點擊編輯按鈕時用的輸入字段來代替first-domain.com ...

我到目前爲止：

function editDomain() { 
    $('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>'); 
} 

這改變了我所有的標題 - 什麼是最好的方式來取代只有正確的標題？

Answer 1

首先，將您的HTML切換爲使用類的鏈接並刪除內聯事件處理程序。

<div class="result-row odd"> 
<div class="domain-name">first-domain.com</div> 
<div class="domain-functions"> 
    <a class="deleteDomain" href="#delete1"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a class="editDomain" href="#edit1"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

然後使用jQuery事件綁定，利用該方法.closest()到您的.html()改變隔離到相關領域。

$(function(){ 
    $('.editDomain').click(function(){ 
    $(this).closest('.result_row').find('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>'); 

    return false; 
    }); 
    $('.deleteDomain').click(function(){ 
    return false; 
    }); 
}); 

Answer 2

將變更應用於元素，因爲它們只需要以下內容。不兼容IE，但可以這樣做。你需要被點擊的元素的兄弟。或者，您可以（也可能）在頁面加載後綁定點擊事件。查看不引人注目的JavaScript，以獲得關於爲什麼更好的一些建議。

<a onclick="editDomain()" href="javascript:void(0);"> 
<img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
</a> 

function editDomain(e) { 
    $(e.srcElement).siblings('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>'); 
} 

Answer 3

首先，我建議你添加一些更改HTML代碼

<div class="result-row odd" id="0"> 
<div class="domain-name">first-domain.com</div> 
<div class="domain-functions"> 
    <a id="delete"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a id="edit"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

<div class="result-row even" id="1"> 
<div class="domain-name">second-domain.com</div> 
<div class="domain-functions"> 
    <a id="delete"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a id="edit"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

您可以添加一個click方法給每個div的你有這樣的

$('div[class^=result-row]').find('div a[id="delete"]').click(function(){ 
     $(this).closest().remove(); 
}); 

你可以這樣做與編輯功能，添加一個點擊到每個div id =「編輯」

$('div[class^=result-row]').find('div a[id="edit"]').click(function(){ 
     $(this).closest().find('.domain-name').html("yourCustomHTMLHere"); 
});