个人中心
gpt4 book ai didi

javascript - 事件委托(delegate)，需要行号显示在添加的项目上

转载 作者：行者123 更新时间：2023-12-02 05:16:20 24 4
gpt4 key购买 nike

我需要行号显示在添加到列表的项目上

<!DOCTYPE html>
<html>
<head>
<title>JavaScript &amp; jQuery - Chapter 7: Introducing jQuery - 
Example</title>
<link rel="stylesheet" href="css/c7.css" />
</head>
<body>
<div id="page">
  <h1 id="header">List</h1>
  <h2>Buy groceries <span id="counter"></span></h2>
  <ul>
    <li id="Row: 1" class="hot"><em>fresh</em> figs</li>
    <li id="Row: 2" class="hot">pine nuts</li>
    <li id="Row: 3" class="hot">honey</li>
    <li id="Row: 4">balsamic vinegar</li>
  </ul>
  <div id="newItemButton"><button href="#" id="showForm">new item</button>
</div>
  <form id="newItemForm">
    <input type="text" id="itemDescription" placeholder="Add description" />
    <input type="submit" id="add" value="add" />
  </form>
</div>
<script src="js/jq.js"></script>
<script src="js/ex.js"></script>
</body>
</html>

Js

$(function() {
var ids = '';
var $listItems = $('li');

$listItems.on('mouseover click', function() {
ids = this.id;
$listItems.children('span').remove();
$(this).append(' <span class="priority">' + ids + '</span>');
});

$listItems.on('mouseout', function() {
$(this).children('span').remove();
});

});

$(function() {
var $list, $newItemForm, $newItemButton;
var item = '';                                 
$list = $('ul');                               
$newItemForm = $('#newItemForm');              
$newItemButton = $('#newItemButton');          

$('li').hide().each(function(index) {          
$(this).delay(450 * index).fadeIn(1600);     
});

function updateCount() {                       
var items = $('li[class!=complete]').length; 
$('#counter').text(items);                   
}
updateCount();                                

$newItemButton.show();                         
$newItemForm.hide();                           
$('#showForm').on('click', function() {       
$newItemButton.hide();                       
$newItemForm.show();                         
});

$newItemForm.on('submit', function(e) {       
e.preventDefault();                         
var text = $('input:text').val();           
$list.append('<li>' + text + '</li>');      
$('input:text').val('');                    
updateCount();                              
 });

$list.on('click', 'li', function() {
var $this = $(this);               
var complete = $this.hasClass('complete');  

if (complete === true) {          
  $this.animate({                  
    opacity: 0.0,
    paddingLeft: '+=180'
  }, 500, 'swing', function() {    
    $this.remove();                
  });
} else {                          
  item = $this.text();             
  $this.remove();                 
  $list                            
    .append('<li class=\"complete\">' + item + '</li>')
    .hide().fadeIn(300);           
  updateCount();                   
}                                  
});                                 

});

当您将鼠标悬停在行上时，行号会出现在尾部(出现在)该行的文本之后。鼠标离开行后，行号应该消失。示例中的“NEW ITEM”按钮可让您插入新行。插入新行后，您需要确保上面实现的效果也适用于新添加的行。

您可以在这里查看我的页面:http://et791.ni.utoledo.edu/~gaugsbu/asg4/asg4.2.html

最佳答案

event delegation 的规则很简单。您必须将事件委托(delegate)给作为永久 Assets 的元素/文档，并以动态元素为目标。

您不能存储 $listItems因为该集合不包括运行代码后添加的新集合。

看来你的<ul>是永久性的，所以做类似的事情:

$('ul').on('mouseover click', 'li', function(event){
  // do stuff
}).on('mouseout','li', function(event){
   // do stuff
})

关于javascript - 事件委托(delegate)，需要行号显示在添加的项目上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46760850/

24 4 0
文章推荐： julia - Julia 中的参数仿函数
文章推荐： serial-port - 从 PC 到 PLC 的 RS232 连接比使用 USB2RS232 电缆慢？
文章推荐： tcl - 如何将 tcl 字符串视为十六进制数并将其转换为二进制数？
文章推荐： scala - 让一种方法接受两种不同模型的 Scala 最佳实践是什么
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com