3

私は個人的なプロジェクトに取り組んでいますが、小さな問題があります。

これは私のコードコードであり、現在機能しています： http: //jsfiddle.net/gvM3b/：

$(".show-more").click(function () {
    $(this).text("(Show Less)");
$(".text").toggleClass("show-more-height");
});​

問題は、「（もっと見る）」のテキストが「（もっと少なく）」に変わるが、必要なときに元に戻らないことです。

^それは1つのことです。追加のことは、[...]がテキストに表示される場合に、[...]を追加する方法を知っている場合です。それを理解しようとしていましたが、少し助けを求めなければなりませんでした。私はjqueryを初めて使用します。

ありがとう！

4

5 に答える 5

6

jQueryを更新します。

$(".show-more").click(function () {
    if($(".text").hasClass("show-more-height")) {
        $(this).text("(Show Less)");
    } else {
        $(this).text("(Show More)");
    }

    $(".text").toggleClass("show-more-height");
});

http://jsfiddle.net/gvM3b/1/を参照してください

于 2012-09-02T21:58:38.290 に答える
4

次に、三項演算子を使用します。

$(".show-more").click(function () {
  var $this = $(this);
  $this.text($this.text() == "(Show Less)" ? "(Show More)" : "(Show Less)");
  $(".text").toggleClass("show-more-height");
});​

または.text()関数で使用する：

$(".show-more").click(function () {
  $(this).text(function (i, oldText) {            
    return oldText == "(Show Less)" ? "(Show More)" : "(Show Less)";      
  });
  $(".text").toggleClass("show-more-height");
});​

デモ。

于 2012-09-02T21:57:15.510 に答える
2

このような：

$(".show-more").click(function () {        
    $(".text").toggleClass("show-more-height");
    if(!$(".text").hasClass("show-more-height")){
        $(this).text("Show Less");
    }else{
        $(this).text("Show More");
    }
});

更新された フィドル

于 2012-09-02T22:01:30.947 に答える
0

もう1つの解決策は次のとおりです。

var i = 0;   

$(".show-more").on('click', function() {
    $(this).text( ++i % 2 ? "(Show Less)" : "(Show More)" );
    $('.text').toggleClass("show-more-height");
});

フィドル： http： //jsfiddle.net/gvM3b/6/

于 2012-09-02T22:22:00.140 に答える
0

'ShowMore''ShowLess 'の問題を処理するJquerymorelessライブラリをお勧めします。

代替：cmtextconstrain

于 2013-06-11T16:25:49.540 に答える