Question

我正在尝试使用（https://www.npmjs.com/package/multi-clamp)[multi-clamp.js]来限制/截断从reddit api返回的标题。

但是，它仅适用于第一个重新调谐的标题，而不是所有标题。我如何确保该函数可以在api返回的所有标题上运行，而不仅是第1个？

const reddit = "https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"

async function getData() {
    try {
        let response = await fetch(reddit);
        let data = await response.json()
        return data;
    } catch (error) {
        console.log("error", error);
    }
}

getData()
    .then(data => data.data.children)
    .then(data => data.map(post => ({
        source: post.data.domain,
        author: post.data.author,
        link: post.data.url,
        img: (typeof (post.data.preview) !== 'undefined') ? post.data.preview.images[0].source.url : null,
        title: post.data.title,
    })))
    .then(data => data.map(render))

const app = document.querySelector('#app');

const render = post => {
    //console.log(post.data);
    const node = document.createElement('div');
    node.classList.add('news-item', `news-item--${ post.class }`);
    node.innerHTML = `
    <a class="news-item-link" href="${post.link}">
        <div style="background-image: url('${post.img}')" class="news-item-bg"></div>
        <div class="news-item-content">
            <h3 class="news-item-source">${post.source}</h3>
            <h2 class="news-item-title mb-2">${post.title}</h2>
        </div>
    </a>`;
    app.appendChild(node);

    new MultiClamp(document.querySelector('.news-item-title'), {
        ellipsis: '...',
        clamp: 2
    });
}

new MultiClamp..是在标题选择器上进行夹持的位置，但仅夹持返回的第一个标题，而不是所有夹持的标题。

如何让它在所有游戏上运行？

Answer 1

resolutions仅返回与选择器匹配的第一个元素。由于您是在整个document.querySelector上执行它，因此它将始终获得您附加到文档的第一个标题，并在其上创建许多document。

相反，您需要在新节点中选择一个新的title元素：

new MultiClamp

顺便说一句，将function render(post) { const node = document.createElement('div'); node.classList.add('news-item', `news-item--${ post.class }`); node.innerHTML = ` <a class="news-item-link" href="${post.link}"> <div style="background-image: url('${post.img}')" class="news-item-bg"></div> <div class="news-item-content"> <h3 class="news-item-source">${post.source}</h3> <h2 class="news-item-title mb-2">${post.title}</h2> </div> </a>`; app.appendChild(node); new MultiClamp(node.querySelector('.news-item-title'), { // ^^^^ ellipsis: '...', clamp: 2 }); }与未转义的插值一起使用会打开您的XSS攻击应用程序。也可以使用DOM API更好地构建整个节点的内容。

使用multi-clamp.js从reddit API中截断标题

1 个答案: