事件代表团，需要行号显示在添加的项

我需要的行号上添加的项目显示在列表事件代表团，需要行号显示在添加的项

<!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

来源

2017-10-15 Tom Ford

这将有助于可读性，如果你有2个或4个空格（而不是制表符）缩进代码。如果你使用jQuery，你应该包含一个jQuery标签。 – RobG

-1

规则event delegation非常简单。您必须将事件委托给作为永久资产的元素/文档，并定位动态元素。

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

看来你<ul>是永久性这样做：

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

来源

2017-10-15 23:37:16 charlietfl

事件代表团，需要行号显示在添加的项

回答

相关问题