0

アンカーをクリックするとテキストが変更されるようにしようとしました。しかし、トグルする代わりに、非表示になり、機能しません。

コードは次のとおりです。

$('a#button').click(function(e) {
    e.preventDefault();
    findListingBoxList.slideToggle('200');

    $(this).toggle(function() {
        $(this).html('Hide All');
    }, function() {
        $(this).html('Show All');
    });
});

HTML:

<a id="button" href="#"></a>
<div id="ListingBox">

        <ul id="furniture">
            <li>Beds</li>
            <li>Chairs</li>
            <li>Tables</li>
            <li>Desks</li>
            <li>Shelves</li>
            <li>Cabinet</li>
            <li>Miscellaneous</li>
        </ul>

        <ul id="games">
            <li>PC</li>
            <li>Mac</li>
            <li>XBOX 360</li>
            <li>Playstation 3</li>
            <li>Nintendo Wii</li>
            <li>PS Vita</li>
            <li>Playstation 2</li>
            <li>Playstation</li>
            <li>Super Nintendo</li>
            <li>Nintendo DS</li>
            <li>Miscellaneous</li>
        </ul>
</div>

.html私はすでにとで試しました.text。

4

4 に答える 4

4

toggleevent メソッドは非推奨です。メソッドのコールバック関数を使用できますが、200ms という実行速度が速すぎるtextことに注意してください。slideToggle

$('#button').click(function(e) {
    e.preventDefault();
    findListingBoxList.slideToggle(600);   
    $(this).text(function(i, currentText){
       return currentText === 'Show All' ? 'Hide All' : 'Show All';
    })
});
于 2013-01-29T14:03:19.783 に答える
1

.toggle() event1.8以降は非推奨です

HTML :

<a href="#" id="button" class="hide_all">Hide ALL</a>

<div id="find">
  <p>Here is some content</p>
  <p>Here is some content</p>
</div>

JS:

var findListingBoxList = $('#find');

var labels = {
  hide: 'Hide ALL',
  show: 'Show ALL'
};

$('#button').click(function(e){

  e.preventDefault();
  if($(this).text() == labels.show) {
    $(this).text(labels.hide);
    findListingBoxList.slideDown();
  } else {
    $(this).text(labels.show);
    findListingBoxList.slideUp();
  }
})

slideDown/slideUp を使用すると、開始ステータスに関係なくリンクを機能させることができます (すべて表示またはすべて非表示の状態でページをロードできます)。

デモについては、これを見てください: http://codepen.io/ByScripts/pen/mbekK

于 2013-01-29T13:58:23.560 に答える
1

まず、トグル イベントは最新の jquery で削除され、v 1.8 から非推奨になったことを思い出してください。

また、コードでは、最初にクリックされた後にのみ、トグル イベントをボタンにバインドします。その代わりに、次のようにする必要があります。

$('a#button').click(function(e) {
    e.preventDefault();
    findListingBoxList.slideToggle('200');

}).toggle(function() {
        $(this).html('Hide All');
    }, function() {
        $(this).html('Show All');
    });

最後に、それは の外側にある必要がありfindListingBoxListます。

于 2013-01-29T14:03:58.040 に答える
0 
findListingBoxList.slideToggle(200);

文字列ではなく整数の引数を指定する必要があります。'200'

于 2013-01-29T14:01:36.763 に答える