Question

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

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

例如，我无法找出使第一个按钮操纵第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()，因为你正在使用它的朋友.after()：

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

用法：

$($btn).click(play);

让每个按钮操纵它上面的内容

1 个答案: