当我遇到这个障碍时,我正在练习 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>
最佳答案
使用 jQuery .prev()
因为你正在使用它的 friend .after()
:
function play(e) {
var $article = $(this).prev();
$article.html("played");
}
用法:
$($btn).click(play);
关于javascript - 让每个按钮操作其上方的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47270890/