jquery - 更改文本项目选择

Question

你好，我有很多元素，所以如果我点击其中任何一个，我都可以修改文本，但是 在我的代码中 -如果我单击任何元素，它总是会更改最后一个元素，而不是选择元素 -另一个问题，如果我单击图标编辑，如何复制每个元素

$(".edit").click(function() {
  $('.edit').each(function(index) {
    $(".item").get(index).contentEditable = "true";
    $(".item").focus();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div id="hovermodule1" data-id="itemdat-1" class="item disable " draggable="true">
    Lorum1
  </div>
</div>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div id="hovermodule2" data-id="itemdat-2" class="item disable " draggable="true">
    Lorum2
  </div>
</div>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div id="hovermodule3" data-id="itemdat-3" class="item " draggable="true">
    Lorum3
  </div>
</div>

Answer 1

问题是因为您循环遍历所有 .item 元素并对它们调用focus()。一次只有一个元素可以获得焦点，因此它将是您在循环中调用的最后一个元素。

我假设您想在与 .edit< 相关的 .item 上设置 contenteditable 和 focus()/code> 被单击的元素。为了使用它，你可以使用 jQuery 的 DOM 遍历方法；在本例中，closest() 和 next()。

要克隆一个元素，您可以对其调用clone()。我认为您的意思是在 UI 中给定其上下文的 .cloner 元素上执行此操作。然后，您可以在必要时将克隆添加回 DOM。

另请注意，要使 .edit 和 .cloner 链接在克隆本身中工作，您需要使用委托(delegate)事件处理程序，并且需要删除 <您克隆的元素中的 code>id 属性，否则您将获得无效的重复项。

话虽如此，试试这个:

$(document).on('click', '.edit', function() {
  $(this).closest('.blocimage').next('.item').prop('contenteditable', true).focus();
});

$(document).on('click', '.cloner', function() {
  var $clone = $(this).closest('.blocgloab').clone();
  $clone.insertAfter('.blocgloab:last');
});

.item {
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div data-id="itemdat-1" class="item disable " draggable="true">
    Lorum1
  </div>
</div>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div data-id="itemdat-2" class="item disable " draggable="true">
    Lorum2
  </div>
</div>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div data-id="itemdat-3" class="item " draggable="true">
    Lorum3
  </div>
</div>