1

こんにちは、私はjQuery初心者で、トグル効果を作ろうとしています。私のコードは正常に動作していますが、テキストを切り替えたい場合は、次のコードを確認してください

脚本

$('.read_more_list').click(function() {
    $(".design_list").slideToggle();
    if ($(this).children('a').html() == 'more') {
        $(this).children('a').html('less');
    }
    if ($(this).children('a').html() == 'less') {
        $(this).children('a').html('more');
    }
})​

HTML

<ul class="design_list" style="display: none;">
            <li><a href="#">eCommerce</a></li>
            <li><a href="#">Display  Creatives</a></li>
            <li><a href="#">Logo Design  Services</a></li>
            <li><a href="#">Microsites</a></li>
          </ul>
<div class="read_more_list"><a href="javascript:void(0);">more</a></div>

ユーザーがクリックするとmore、に変換されless、ユーザーが再度クリックすると、に変わりますmore

事前に友達に感謝して助けてください... :))

4

2 に答える 2

2

conditional operator ? :トグルと一緒にテキストを切り替えるために使用できます。

$(this).text($(this).text() == "more" ? "less" : "more");

ライブデモ

$('.read_more_list').click(function() {
    $(".design_list").slideToggle();
    $('a', this).text($(this).text() == "more" ? "less" : "more");   
})​
于 2012-12-23T08:06:33.453 に答える
2

jsBinデモ

$('.read_more_list a').click(function(e){  
    e.preventDefault();

    $(".design_list").slideToggle();
    $(this).text( $(this).text()=='more'?'less':'more' );

});

HTML：

<a href="#">more</a>
  • ボタンにインラインJSvoidなどは必要ありません。Aイベント・ハンドラーを使用するだけevent.preventDefault()です。
  • テキストを切り替えるには、単純な三項演算子を使用できます$(this).text()=='more'?'less':'more'

三項について思い出させるために：[statement] ? [if true] : [if false] ;

于 2012-12-23T08:11:26.567 に答える