1 
<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. クラス "limited" のトグル動作がどの 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);
});

};

});
4

2 に答える 2

1

試す

$(document).on("click",'.instructions', function(event,ele){
$(this).next('div').toggleClass("limited");    
 var currMessage = (ele.text() == hideMessage) ? showMessage : hideMessage;
 ele.text(currMessage);
});
于 2013-06-12T09:35:33.597 に答える