javascript - 让每个按钮操作其上方的内容

Question

当我遇到这个障碍时，我正在练习 jQuery。

我创建了 10 个 article 标签，每个标签都包含内容。我编写了一个函数来自动为每个 article 标签添加 id (id+1、id+2、等)，然后我还使用 JavaScript 在每个 article 标记后创建了一个 button 标记。

例如，我无法弄清楚使第一个按钮操作文章 1 标签的代码。我希望每个按钮只影响其上方的文章。我怎样才能从逻辑上实现这一目标？

这是我的代码:

$(function () {
    // Script begin ----
    
    const $articles = $(".siblings");
    
    const articlesManipulator = (function () {
        for (let i = 0; i < $articles.length; i++) {
            $articles[i].id = "sibling-" + (i+1);
            let $btn = document.createElement("button");
            $btn.textContent = "play with me :)";
            $btn.id = "player" + (i+1);
            $articles[i].after($btn);
        }
    }());
    
    // ---- Script end
});

[class^='sibling'] {
    border: 1px solid;
    margin: 15px;
    padding: 10px;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="maincontent">
    
    <article class="siblings">Architecto minus, laboriosam vitae natus voluptatum debitis alias asperiores, voluptatibus repudiandae harum sed repellendus? Magni, possimus, ad! <em>Quam perspiciatis praesentium, excepturi mollitia.</em></article>
    
    <article class="siblings"><em>Ullam iusto praesentium minima, placeat nam, fugiat nulla suscipit impedit soluta, aliquid a eaque omnis perspiciatis animi officiis minus nesciunt nostrum quisquam?</em></article>
    
    <article class="siblings">Corporis neque sunt error quaerat, deserunt non suscipit quidem ducimus dolor libero. Laboriosam placeat minus, nobis explicabo consequatur aut culpa praesentium qui.</article>
    
    <article class="siblings">Corporis neque sunt error quaerat, deserunt non suscipit quidem ducimus dolor libero. Laboriosam placeat minus, nobis explicabo consequatur aut culpa praesentium qui.</article>
    
    <article class="siblings">Corporis neque sunt error quaerat, deserunt non suscipit quidem ducimus dolor libero. Laboriosam placeat minus, nobis explicabo consequatur aut culpa praesentium qui.</article>
    
    <article class="siblings">Corporis neque sunt error quaerat, deserunt non suscipit quidem ducimus dolor libero. Laboriosam placeat minus, nobis explicabo consequatur aut culpa praesentium qui.</article>
    
    <article class="siblings">Corporis neque sunt error quaerat, deserunt non suscipit quidem ducimus dolor libero. Laboriosam placeat minus, nobis explicabo consequatur aut culpa praesentium qui.</article>
    
    <article class="siblings">Corporis neque sunt error quaerat, deserunt non suscipit quidem ducimus dolor libero. Laboriosam placeat minus, nobis explicabo consequatur aut culpa praesentium qui.</article>
    
    <article class="siblings">Corporis neque sunt error quaerat, deserunt non suscipit quidem ducimus dolor libero. Laboriosam placeat minus, nobis explicabo consequatur aut culpa praesentium qui.</article>
    
    <article class="siblings">Corporis neque sunt error quaerat, deserunt non suscipit quidem ducimus dolor libero. Laboriosam placeat minus, nobis explicabo consequatur aut culpa praesentium qui.</article>
    
</section>

Answer 1

使用 jQuery .prev()因为你正在使用它的 friend .after() :

function play(e) {
    var $article = $(this).prev();
    $article.html("played");
}

用法:

$($btn).click(play);