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但可以这样做。您需要单击的元素的兄弟。或者，您可以（并且应该）在页面加载后绑定click事件。查找不引人注目的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>

你可以为你得到的每个div添加一个click方法

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

您可以使用编辑功能执行相同操作，为每个div id =“edit”

添加一个点击

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

帮助jquery选择正确的元素

3 个答案: