Question

我有一个回调函数来删除一个li元素。

function deleteLi(liElement) { 
   liElement.remove()
}

两个按钮执行相同的操作。在悬停liElement时，我得到了一个编辑＆amp;删除选项。单击编辑选项后，将打开一个对话框，该对话框还具有删除选项。所以这两个按钮都是一样的，因此我调用相同的功能。

但它看起来像这样

$('.edit').on('click', function() {
     currentField = $(this).parents('li');
     openDialog();
});


$('.delete1').on('click', function() {
     deleteLi($(this).parents('li'));
});

$('.delete2').on('click', function() {
    deleteLi(currentField)
});

那么还有其他最好的办法吗？

Answer 1

使用此HTML：

<ul class="editableList">
  <li>
    <span>Stuff here</span>
    <a href="#" class="delete">-</a>
    <a href="#" class="edit">e</a>
  </li>
  <li>
    <span>Other stuff here</span>
    <a href="#" class="delete">-</a>
    <a href="#" class="edit">e</a>
  </li>
</ul>

这个J：

$('.editableList').on('click', '.delete', function(e){
  e.preventDefault();
  $(this).parent('li').remove()
}).on('click', '.edit', function(e){
  e.preventDefault();
  editLi(this);
});

function editLi(elt) {
  // Code to edit "li > span" element
  console.log('editing element', elt);
}

Answer 2

您可以通过在点击时向选定的<li>添加一个类（或数据属性，我在这里使用类来获取视觉反馈）来避免全局变量编辑，并在关闭编辑弹出窗口后将其删除：

＆＃13;

$('.edit').on('click', function () { // open edit popup
    $(this).closest('li').addClass("active"); // mark the current <li>
    $("#editPopup").show();
});

$("#editPopup span").on("click", function () { // close edit popup
    $(".active").removeClass("active"); // unselect it
    $("#editPopup").hide();
});

$('.delete').on('click', function () { // inline delete option
    $(this).closest('li').remove();
});

$('#delete').on('click', function () { // delete option in popup
    $(".active").remove();
    $("#editPopup").hide();
});

＆＃13;

* {
    margin:0;
    padding:0;
}
ul {
    list-style-type:none;
}
li {
    border-bottom:1px solid;
    background:silver;
    height:50px;
    line-height:50px;
}
li a {
    display:none;
    float:right;
    margin:0 5px;
}
li:hover a {
    display:inline-block;
}
li.active {
    background:dodgerblue;
}
#editPopup {
    display:none;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:200px;
    height:50px;
    margin:auto;
    background:#fff;
    box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
#editPopup span {
    position:absolute;
    right:5px;
    cursor:pointer;
    color:red;
}
#editPopup a {
    margin:5px;
    vertical-align:bottom;
}
li:first-child span{
    padding:3px;
    font-family: arial;
    font-size: 14px;
    color:#0077CC;
    outline:1px solid grey;
    background:white;
}
li:first-child span:hover{
    text-decoration:underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="editableList">
  <li> The <span>Full page</span> button is messing with my options!
      <a href="#" class="delete">x</a>
      <a href="#" class="edit">edit</a>
  </li>
  <li> <span>Item 2</span>
    <a href="#" class="delete">x</a>
    <a href="#" class="edit">edit</a>
  </li>
  <li> <span> Hover Me!</span>
    <a href="#" class="delete">x</a>
    <a href="#" class="edit">edit</a>
  </li>
</ul>

<div id="editPopup"> <span>x</span><br/>
 <a href="#" id="edit">edit</a>
 <a href="#" id="delete">delete</a>
</div>

＆＃13;

Answer 3

你可以简单地给一个类删除按钮'delete1'并使用以下代码

$('.delete1').on('click', function() {
     deleteLi($(this).parents('li'));
});

如果你的css对于那个删除按钮不同，那么jQuery中有多个类选择器。

根据评论编辑代码：

$('.delete1, .delete2').on('click', function() {
     if(currentField == null) {
         currentField = $(this).parents('li');
     }
     deleteLi(currentField);
});

Answer 4

我使用回调方法。当点击编辑按钮时，你定义currentField变量，然后定义匿名回调，这是从openDialog的deleteButton中调用的。

$('.delete1').on('click', function () {
    deleteLi($(this).parents('li'));
});
$('.edit').on('click', function () {
    var currentField = $(this).parents('li');
    openDialog({
        onDelete: function () {
            deleteLi(currentField);
        }
    });
});
function openDialog(args) {
    //... open dialog here ...
    $('.delete2').on('click', args.onDelete);
}

是否有更好的方法来处理相同的回调函数但不同的输入参数？

4 个答案: