0

非表示になっている次のdivがあります。

<div class="showDescription 73" style="display:none;">blah blah blah</div>

そしてその横に：

<div class="more" divtoshow="73" style="cursor:pointer">more...</div>

classmoreで div をクリックすると、非表示の div が表示されます。次に、単語を変更し、more... to less...class を削除moreし、 class を追加して、canHideもう一度クリックすると div が再び非表示になるようにします。シンプルなもの。これは次のようになります。

<div class="canHide" divtoshow="73" style="cursor:pointer">less...</div>

more という単語をクリックすると、非表示の div が表示されて classcanHideが追加されますが、もう一度クリックしても何も起こらず、理由がわかりません。

JQuery - このセクションは正常に機能します。

$('.more').click(function() { // show hidden div
    var classId = $(this).attr('divToShow');
    $("." + classId).fadeIn();
    $(this).removeClass('more');
    $(this).addClass('canHide');
    $(this).html('less...');
});

このセクションは何もしませんか??

$('.canHide').click(function() { // hide shown div
    var classId = $(this).attr('divToShow');
    $("." + classId).fadeOut();
    alert('hey'); // for test purposes only
    $(this).removeClass('canHide');
    $(this).addClass('more');
    $(this).html('more...');
});

ここにフィドルがあります

4

2 に答える 2

8

クラスを変更しているため、そのハンドラー (実行時にバインドされます) は、その新しいクラスが存在することを知りません。イベント委任を使用します。

$(document).on('click', '.canHide', function() { // hide shown div

});

documentクラスを持つ要素を含み、.canHide実行時に存在する要素である必要がありますが、HTML が表示されないためdocument、安全な方法です。

于 2013-11-05T14:03:41.080 に答える
2

これは簡単かもしれません

$('.more').click(function() { 
    // show/hide element before .more && toggle text
    $(this).html($(this).html()=='▼'?'▲':'▼').prev('.showDescription').stop().fadeToggle();
});

また、moreリンク との間の対応する属性がcontent不要になるため、削除します。つまり、divtoshow/class 73

フィドルを作った：http://jsfiddle.net/filever10/zXz3c/

更新：ここに各部分が分解されています

$('.more').click(function() {
    // get element
    $(this)
    //if html = ▼ then it should now be ▲, or if html = ▲ then it should now be ▼; else it should be ▼
    .html($(this).html()=='▼'?'▲':'▼')
    //get previous element by class
    .prev('.showDescription')
    //clear its queue to prevent buildup
    .stop()
    //fadeIn if it's hidden or fadeOut if it's visible
    .fadeToggle();
});
于 2013-11-05T14:24:18.280 に答える