Question

我有一个待办事项列表，并且在点击每个列表项时我需要它来打开按钮进行编辑，完成和删除...如何分别为每个人执行此操作？这是我的代码

Jquery：

$('.editBt').hide();

$('').click(function(){
    $('.editBt').toggle();
});

HTML：

<ul>
    {{#each tasksToDo}}
        {{>task}}
    {{/each}}
</ul>

<template name="task">
    <li class="list_item">
        <span id="editingTask">{{> editableText collection="tasks" field="title"}}</span>
    <br>
    <div class="editBt">
        <button class="completed">Completed</button><button class="edit">Edit</button><button class="delete">Delete</button>
    </div>
</li>

它显示并隐藏在我拥有的每个列表项上。我知道这是因为上课，但是如何只为一个人做这件事。

Answer 1

您可以使用$(this)来引用所点击的当前项目，然后使用.editBt函数找到与其相关的find() div，最后使用toggle()函数切换它：

$('.list_item').click(function(){
    $(this).find('.editBt').toggle();
});

希望这有帮助。

段

＆＃13;

$('.editBt').hide();

$('.list_item').click(function(){
    $(this).find('.editBt').toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="list_item">
    <span id="editingTask">editableText 1</span>
    <br>
    <div class="editBt">
      <button class="completed">Completed</button><button class="edit">Edit</button><button class="delete">Delete</button>
    </div>
  </li>
    <li class="list_item">
    <span id="editingTask">editableText 2</span>
    <br>
    <div class="editBt">
      <button class="completed">Completed</button><button class="edit">Edit</button><button class="delete">Delete</button>
    </div>
  </li>
    <li class="list_item">
    <span id="editingTask">editableText 3</span>
    <br>
    <div class="editBt">
      <button class="completed">Completed</button><button class="edit">Edit</button><button class="delete">Delete</button>
    </div>
  </li>
    <li class="list_item">
    <span id="editingTask">editableText 4</span>
    <br>
    <div class="editBt">
      <button class="completed">Completed</button><button class="edit">Edit</button><button class="delete">Delete</button>
    </div>
  </li>
</ul>

＆＃13;

Answer 2

我认为你想要这个，它只是隐藏加载按钮并在点击时切换它们：

$('.editBt').hide();

$('.list_item').click(function() {
  $(this).find('.editBt').slideToggle();
});

<强> Demo

如果这不正确，请编辑您的问题以说明应点击哪些元素以及应切换哪些元素。

Answer 3

而不是

$('.editBt').toggle();

使用＆＃39;这个＆＃39;定位点击的元素：

$(this).toggle();

模板中的Jquery列表项隐藏/显示单击

3 个答案:

段