0

目標: #boom1 という名前のすべての DIV ID ですべてのテキスト ボックスを制限しようとしています。

問題:それらをすべて取得することはできません (私の意見では、ループ メソッドの問題です)。

$(関数 () {

var maxL = 300;

$('#boom1').each(function (i, div) { //I got lost with syntax over here

    var text = $('#boom1').text();
    if(text.length > maxL) {

        var begin = text.substr(0, maxL),
            end = text.substr(maxL);

        $('#boom1').html(begin)
            .append($('<a class="readmore"/>').attr('href', '#').html('read more...'))
            .append($('<div class="hidden" />').html(end));
    }

});

$(document).on('click', '.readmore', function () {
    $(this).next('.hidden').slideDown(750);
})

}))

可能であれば、構文を使って助けていただければ幸いです..

ありがとう。

デモの添付

4

5 に答える 5

0

次のコードを使用してみてください。正常に動作します

$(function () {

    var maxL = 300;


    $('.wp-caption-text').each(function (i, div) {
        //alert("dfs");
        var text = $(this).text();
        if(text.length > maxL) {

            var begin = text.substr(0, maxL),
                end = text.substr(maxL);

            $(this).html(begin)
                .append($('<a class="readmore"/>').attr('href', '#').html('read more...'))
                .append($('<div class="hidden" />').html(end));

        }

    });

    $(document).on('click', '.readmore', function () {
        $(this).next('.hidden').slideDown(750);
    })        


})
于 2013-10-08T14:29:27.943 に答える
0

デモ

ID は一意である必要があります。

複数の用途にクラスを使用します。

boom各 div にクラスを追加しました。

追加されたread less...トグルread more...機能も。

$(this)ループ内の現在の要素を参照します。

$(function () {
    var maxL = 300;
    $('.boom').each(function (i, div) {
        var text = $(this).text();
        if (text.length > maxL) {

            var begin = text.substr(0, maxL),
                end = text.substr(maxL);

            $(this).html(begin)
                .append($('<a class="readmore"/>').attr('href', '#').html('read more...'))
                .append($('<div class="hidden" />').html(end));
        }
    });
    $(document).on('click', '.readmore', function () {
        $(this).html(function(_,ctr){
            return (ctr == 'read more...') ? 'read less...':'read more...'
        });
        $(this).next('.hidden').slideToggle(750);
    });
});
于 2013-10-08T14:34:30.380 に答える
0

.each()要素のすべてのインスタンスをループするため、ID を使用しないでください。以下は、すべての「some-class」要素で反復されます。

<div class="some-class"></div>
<div class="some-class"></div>    


$('.some-class').each(function (i, div) {/* code*/ });
于 2013-10-08T14:35:29.433 に答える
0

ID で each を使用できるとは思いません。最初のものしか取得できません。識別子は一意である必要があり、1 ページに 1 回だけ表示されます。したがって、最初のものだけが使用されます。

各 '#boom1' にクラスを追加してみてください。

于 2013-10-08T14:35:37.463 に答える
0 
$(function () {

    var maxL = 300;

    $('#boom1').each(function () { // If you don't use them you won't need them here

        var text = $('#boom1').text();
        if(text.length > maxL) {

            var begin = text.substr(0, maxL),
                end = text.substr(maxL);

            $('#boom1').html(begin)
                .append($('<a class="readmore"/>').attr('href', '#').html('read more...'))
                .append($('<div class="hidden" />').html(end));
        }

    });

    $(document).on('click', '.readmore', function () {
        $(this).next('.hidden').slideDown(750);
    });  



});
于 2013-10-08T14:28:25.110 に答える