Question

我试图点击它时可以编辑文本。以下是我尝试的代码。单击标题时，它会显示一个输入框和按钮以保存它。

<div class="block">
    <div class="title">Title</div>
    <div class="title-edit">
      <input type="text" name="title" value="Title">
      <button>Save</button>
    </div>
</div>

我更改了其他属性，如颜色或更改元素及其工作的文本，但它没有在标题或编辑元素上应用display属性或.show（）/。hide（）函数。

下面是我的jQuery

$(function(){    
    $('.block').on('click', editTitle);

    $('.title-edit button').on('click', saveTitle);

});
function saveTitle(){
    var parent = $(this).closest('.block');
    var title = $('.title', parent);
    var edit = $('.title-edit', parent);
    $(title).show();
    $(edit).hide();     
}

function editTitle(){
    $('.title-edit', this).show();
    $('.title', this).hide();
}

这里是jsfiddle

https://jsfiddle.net/ywezpag7/

我已添加

 $(title).html('abcd');

到最后显示其他属性/功能正在运行，但不是显示。

要检查title元素的html更改，您必须通过开发人员工具检查源代码，因为title元素已隐藏。

我哪里错了？

Answer 1

您的问题出在saveTitle函数中。第一行必须停止事件传播，否则在此函数之后调用editTitle函数。

摘录：

$(function(){
  $('.block').on('click', editTitle);

  $('.title-edit button').on('click', saveTitle);

});


function saveTitle(e){
  
  // this line
  e.stopPropagation();
  
  
  var parent = $(this).closest('.block');
  var title = $('.title', parent);
  var edit = $('.title-edit', parent);
  title.show();
  edit.hide();
  title.text($('.title-edit input').val());
}

function editTitle(e){
  $('.title-edit', this).show();
  $('.title', this).hide();
}

.title-edit{
  display:none
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class="block">
    <div class="title">Title</div>
    <div class="title-edit">
        <input type="text" name="title" value="Title">
        <button>Save</button>
    </div>
</div>

Answer 2

已提到的问题是您的点击事件正在发生争执。在您的代码中，标题编辑类位于块内，因此当您单击保存按钮时，它会触发两次点击的事件。

解决此问题的最简单，最简洁，最干净的方法是切换要在.title和.title-edit button上调用的点击事件。您还可以将代码简化为超出您所在的范围。

$(function(){    
    $('.title').click(editTitle);    
    $('.title-edit button').click(saveTitle);       
});
function saveTitle(){
    $('.title').show();
    $('.title-edit').hide();   
    $(title).html('abcd');
}

function editTitle(){
    $('.title-edit').show();
    $('.title').hide();
}

https://jsfiddle.net/ywezpag7/7/

Answer 3

我尝试调试你的代码，我看到，然后你点击“保存”按钮，处理两个函数，saveTitle（）和editTitle（），并按顺序。因此，最初隐藏的元素，然后显示。

jQuery显示属性没有改变，但其他属性是

3 个答案: