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">的子div超过8个，则会动态添加<span>并添加悬停和点击行为。

点击行为都会切换“受限”类并交换教学文本。 悬停行为都会切换类“.hover”并添加指针光标。

我的结果不稳定。

1. 悬停行为有效。
2. 文字交换适用于某些div
3. “class”类上的切换行为不适用于任何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

尝试

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

Answer 2

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

所以试试

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