jquery - Jquery / Show/Hide / ToggleClass - 动态添加元素的点击行为

Question

<h2 class="yearGroupTitle"><a href="" title="">2013</a> <span class="instructions">Show more work from this year</span></h2>
<div class="yeargroup limited">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div

在上面的示例中，有多个实例<div class="yeargroup limited">，具有不同数量的子 div。如果<div class="yeargroup limited">有超过 8 个子 div，则<span>动态添加 a 并添加悬停和单击行为。

点击行为既切换类“受限”又交换指导文本。悬停行为既切换类“.hover”并添加指针光标。

我得到不稳定的结果。

1. 悬停行为有效。
2. 文本交换适用于某些 div
3. 类“有限”的切换行为不适用于任何 div。

我想我快到了。提前为“不那么优雅”的代码道歉。非常感谢任何帮助。

jQuery :-

$( "div.yeargroup" ).each(function(){

if ($(this).children().length > 8  ) {

var showMessage = 'Show more work from this year';
var hideMessage = 'Show less work from this year';
$( this ).prev('h2').append(' <span class="instructions">' + showMessage +'</span>');
var message = $( '.instructions' );

message.hover(
function() {
$( this ).addClass( 'hover' );
$( this ).css( 'cursor', 'pointer' );},
function() {
$( this ).removeClass( 'hover' );
});


message.on("click", function(event){
$(this).next('div').toggleClass("limited");    
var currMessage = ($(this).text() == hideMessage) ? showMessage : hideMessage;
$(this).text(currMessage);
});

};

});

Answer 1

这是因为您的选择器var message = $( '.instructions' );错误，您只需要选择当前迭代中的那些元素yeargroup。

所以试试

var message = $(this).find( '.instructions' );

Answer 2

尝试

$(document).on("click",'.instructions', function(event,ele){
$(this).next('div').toggleClass("limited");    
 var currMessage = (ele.text() == hideMessage) ? showMessage : hideMessage;
 ele.text(currMessage);
});