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> 并添加悬停和点击行为。

点击行为既可以切换类“受限”，也可以交换说明文本。 悬停行为既切换了类“.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);
});