Question

我有一个ul列表，通过JavaScript在页面加载时动态生成。可以在此处看到生成的代码（删除了不相关的项目）：

<ul class="tweet_list"><li class="tweet_first tweet_odd"></li></ul>

CSS：

ul.tweet_list li {
    height: 55px;
    line-height: 55px;
    overflow: hidden;
    padding: 0.5em !important;
    vertical-align:middle;
}

我试图根据推文中的单词数量更改CSS line-height属性（如果超过9个单词，我希望行高从55px更改为24px）。这是我的JS：

$(function(){
    var $tweet = $(".tweet_first");
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css("line-height", "55px");
    }
    else {
        $tweet.css("line-height", "24px");
    }    
});

这是小工具http://justpaste.it/twitter-widget

的屏幕截图

编辑：我的代码不起作用。出于某种原因，我上面没有任何内容会动态更改行高，除非我进入我的styles.css文件并实际更改行高。我如何在我的JS中调用ul.tweet_list li并直接将line-height属性应用于它？

更新：如果有人可以告诉我如何动态更改CSS部分，我可以弄清楚如何检测推文中的字符数。所以，使用Javascript，我该如何改变：

ul.tweet_list li {line-height: 55px; }

到此：

ul.tweet_list li {line-height: 24px; }

更新2：调用推文的代码：

jQuery(function($){
      $(".tweeter_widget").tweet({
        join_text: "auto",
        username: "twitter_username",
        avatar_size: null,
        count: 1,
        auto_join_text_default: "",
        auto_join_text_ed: "",
        auto_join_text_ing: "",
        auto_join_text_reply: "",
        auto_join_text_url: "",
        loading_text: "loading tweets..."
      });
    });

Answer 1

我认为应该是：

$(function(){
    var $tweet = $(".tweet_first");
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css({ "font-size": "55px", "line-height": "55px" });
    }
    else {
        $tweet.css({ "font-size": "24px", "line-height": "24px" });
    }    
});

更新：好的，也许我明白了：

看一下你用过的插件的文档，我看到你可以绑定一个像“loaded”这样的事件处理程序，它会在呈现推文后触发。因此，您需要使用以下命令更改代码：

jQuery(function($){
  $(".tweeter_widget").tweet({
    join_text: "auto",
    username: "twitter_username",
    avatar_size: null,
    count: 1,
    auto_join_text_default: "",
    auto_join_text_ed: "",
    auto_join_text_ing: "",
    auto_join_text_reply: "",
    auto_join_text_url: "",
    loading_text: "loading tweets..."
  }).bind("loaded", function() {
    var $tweet = $(".tweet_first"); // maybe using  $(this)  is better
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css({ "font-size": "55px", "line-height": "55px" });
    }
    else {
        $tweet.css({ "font-size": "24px", "line-height": "24px" });
    }
  });
});

请尝试，未经测试：）

Answer 2

您正在更改代码中的font-size，这可能是改变的第一个问题：

    $tweet.css("font-size", ...

到

    $tweet.css("line-height", ...

好吧，除了你的代码看起来没问题，所以我会尝试：

....
var $tweet = $(".tweet_first");
var $numWords = $tweet.text().split(" ").length;
alert("num of words: " + $numWords);  // make sure you are getting a value
alert("# of .tweet_first els: " + $tweet.length);  // make sure you have an element to change
...

JS根据字符数更改CSS行高

2 个答案: