0

YouTube からコメントを取得してページに投稿する Jquery のセグメントがありますが、現状では、コメントの周囲の境界線は標準サイズです。可能であれば、これをコメント領域のテキストの量に合わせて拡大縮小する方法が欲しいです。

フィドル

現在の CSS:

.videoComments {
    border: 1px solid #000;
    margin-bottom: 20px;
}
.author {
    font-size: 13px;
    font-weight: bold;
    color: grey;
}
4

4 に答える 4

1

なぜこのようにしないのですか？

http://jsfiddle.net/8JLH7/9/

追加

.videoComments {
  float:left;
  clear:both;
}
于 2013-09-27T10:07:35.213 に答える
0

.videoComments要素の高さを可変にしたいということですか？

使用する：

.videoComments {
    border: 1px solid #000;
    margin-bottom: 20px;
    min-height: 0;
    height: auto;
}

例: http://jsfiddle.net/8JLH7/8/

于 2013-09-27T10:06:04.807 に答える
0

フィドルを更新する方法はわかりませんが、必要なコードは次のとおりです。

jQuery

$(document).ready(retriveComments);

function retriveComments() {
$.get("https://gdata.youtube.com/feeds/api/videos/jofNR_WkoCE/comments", function (d) {
    $(d).find("entry").each(function (_, entry) {
        var author = $(entry).find("author name").text(),
            comment = $(entry).find("content").text();
        html = '<div class="videoComments"><div class="inner">';

        html += '<p class="author">' + author + '</p>';
        html += '<p class="comment">' + comment + '</p>';
        html += '</div></div>';

        $('#comments').append(html);
    });
});

}

CSS

.videoComments {
margin-bottom: 20px;
}
.author {
font-size: 13px;
font-weight: bold;
color: grey;
}
.inner{ border: 1px solid red; display: inline-block; }

videoComments div 内に追加の 'inner' div を追加し、それに境界線を適用しました。

編集：フィドルを更新する方法を知っているかもしれません：http://jsfiddle.net/8JLH7/7/

于 2013-09-27T10:04:26.207 に答える
0

必要に応じて変更できる基本的なバージョンです。

最初の 2 つのvar宣言の後:

var border = comment.length / 10;

次に、html 出力の最初の行を更新します。

html = '<div class="videoComments" style="border-width: '+border+'px">';

これにより、各コメントには、コメント内の 10 文字ごとに 1px の枠線幅が追加されます。

例: http://jsfiddle.net/8JLH7/4/

于 2013-09-27T10:04:37.987 に答える