javascript - 传递变量以追加

Question

在主页上，JS 将从新闻页面抓取最多三个新闻报道，并显示链接到完整报道的缩略版本。我遇到的问题是我尝试连接的变量之一没有按预期执行。

主页:

<div id="news-autoloader">

</div>

新闻页面:

<h3 id="news1">News Item 1</h3>

<p>Lorem ipsum dolor sit amet...</p>

<h3 id="news2">News Item 2</h3>

<p>Lorem ipsum dolor sit amet...</p>

// more or less of the same news items

新闻页面可能没有项目，但我们将捕获最多三个，首先是标题，然后是 h3 后面的第一个 p 的 n 个字符(宁愿捕获 n 个单词，但那是在这个问题解决之后!)标题。

<script>
$.get('company-news.html',
    function(data){
        var news1 = $(data).find('#news1 + p');
        var news2 = $(data).find('#news2 + p');
        var news3 = $(data).find('#news3 + p');

// see how many news items there are (there's probably a more graceful way of doing this!):

    if (news1.html() == null){
        var items = 0;
    } else if (news2.html() == null){
        var items = 1;
    } else if (news3.html() == null){
        var items = 2;
    } else {
        var items = 3;
    }

    if (items == 0){
        $('#news-autoloader').append('<h3>No News.</h3>');
    } else {
        for (i=1; i<=items; i++){
            var abc = '#news' + i;
            var def = 'news' + i;
            var url   = 'a href="company-news.html#news' +i;

            $('#news-autoloader').append($(abc,data)).append('<p>' + def.html().substr(0, 175) + ' <' + url + '">More</a></p>');
        }
    }
}, 'html');
</script>

一切正常 - abc 在第一个追加中正确计算，但在第二个追加中，变量 def 却不能。

我想知道三件事:

1) 如何让 def 在第二个附加中工作，

2)是否有更优雅的方式来查找新闻项的数量，

3)如何限制字数而不是字符数(以便缩写句子完整)。

TIA!!!

Answer 1

你的问题是你调用了 ...def.html().... 并且 def 既不是 jQuery 对象也不是元素。相反，def 的值为'news' + i，其中i 是迭代次数。

如果您的目的是从 id 为 news 的元素中获取 HTML，那么您需要将 def 的值更改为'#news' + i，然后将def包装成一个jQuery对象，$(def)，函数:

...$(def).html()...

更新

如果我再次误解你的意思，并且你想要做的是渲染变量 news1、news2 和 news3，那么你应该把将这些变量放入数组中。

如果不使用数组，则无法从 JavaScript 中的字符串引用变量。

如果是这种情况，您的更新代码将如下:

<script>
$.get('company-news.html',
    function(data){
        var newsData = [];
        newsData["news1"] = $(data).find('#news1 + p');
        newsData["news2"] = $(data).find('#news2 + p');
        newsData["news3"] = $(data).find('#news3 + p');

// see how many news items there are (there's probably a more graceful way of doing this!):

    if (newsData["news1"].html() == null){
        var items = 0;
    } else if (newsData["news2"].html() == null){
        var items = 1;
    } else if (newsData["news3"].html() == null){
        var items = 2;
    } else {
        var items = 3;
    }

    if (items == 0){
        $('#news-autoloader').append('<h3>No News.</h3>');
    } else {
        for (i=1; i<=items; i++){
            var abc = '#news' + i;
            var def = 'news' + i;
            var url   = 'a href="company-news.html#news' +i;

            $('#news-autoloader').append($(abc,data)).append('<p>' + $(newsData[def]).html().substr(0, 175) + ' <' + url + '">More</a></p>');
        }
    }
}, 'html');
</script>