Question

$("input").on("keypress",function(e){
    if(e.which===13){
        $("ul").last().append("<li>"+$(this).val()+"</li>");
    }
    $("li").on("click",function(){
        $(this).toggleClass("striked");
    });

    $("li").on("mouseenter",function(){
        $(this).css("color","green");
    });
});
$("li").on("click",function(){
        $(this).toggleClass("striked");
});
$("li").on("mouseenter",function(){
        $(this).css("color","green");
});
$("#slide").on("click",function(){
    $("input").slideToggle();
});

在这里，我在onClick上使用了<li>事件来两次应用罢工类，以使其对动态元素和非动态元素都有效。页。但是代码已复制，而且看起来很长。有什么方法可以缩短，以便我可以编写一次并同时激活两种类型的元素？

Answer 1

在ul上使用事件委托，因此您只需设置一次监听器，而不必为加载和.append上的em>。另外，将ul和input jQuery包装的元素保存在变量一次中，而不是选择它们并在每次使用时将它们包装在jQuery中：

const $ul = $("ul"); const $input = $("input"); $input.on("keypress", function(e) { if (e.which === 13) { $ul.last().append("<li>" + $(this).val() + "</li>"); } }); $ul.on("click", 'li', function() { $(this).toggleClass("striked"); }); $ul.on("mouseenter", 'li', function() { $(this).css("color", "green"); }); $("#slide").on("click", function() { $input.slideToggle(); });

Answer 2

一种比较通用的方法是捕获点击事件并检查它是否来自ul

document.body.onclick = function(e){
  e = e || event;
  var from = findParent('ul',e.target || e.srcElement);
  if (from){
     /* it's a link, actions here */
  }
}
//find first parent with tagName [tagname]
function findParent(tagname,el){
  while (el){
    if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
      return el;
    }
    el = el.parentNode;
  }
  return null;
}

现在您可以更改传递给findParent函数的tagName并进行相应的操作

Read Here

Answer 3

您可以尝试使用jquery all选择器$('*')。有关更多信息，请参见 https://api.jquery.com/all-selector/。

或者您可以向要执行onClick操作的每个元素添加特定的类。

有什么方法可以使onClick变为全局或DRY吗？

3 个答案: