私が持っているのは
<div>
<div onclick="find(this)" class="grey">1</div>
<div onclick="find(this)" class="grey">2</div>
<div onclick="find(this)" class="grey">3</div>
<div onclick="find(this)" class="grey">4</div>
<div onclick="find(this)" class="grey">5</div>
</div>
私がやりたいのは、<div>（例<div>...3</div>:)をクリックして、div 3のクラスを置き換え、前の兄弟の「赤」と次の兄弟の「灰色」をすべて置き換えることです。
私がうまくいくと思ったのは、親要素に到達するまで逆方向にループすることです。
私が試していること。
function find(ele) {
var active = ele;
var previous = active.previousElementSibling;
var next = active.nextElementSibling;
var list = []; // Trying to find a way to push all previous siblings of active into this array
var i = 0;
while (i < list){
next.classList.replace('grey')
previous.classList.replace('red');
i++
}
}
関数を完成させるための知識が不十分なため、助けが必要な未定義のものがいくつかありますが、熟考した後、関数が呼び出されるたびに前の兄弟が灰色に戻るため、この関数は機能しない可能性があります。
それで、これを機能させる方法はありますか？
リスト配列内の要素のみがクラスを赤に置き換え、配列内にない要素は灰色に置き換えます。
あなたの助けに感謝します、あなたが助けてくれた人に本当に感謝します。
div最初にすべてのターゲットを配列に入れます。クリックすると、配列内でクリックされた要素のインデックスを。で見つけますindexOf。次に、.sliceインデックス0からクリックされたインデックスまでの配列を作成し、そのスライス内のすべての要素をred-に設定します.slice。ただし、今回はクリックされたインデックスから開始し、そのスライスのすべての要素を次のように設定しますgrey。
const greys = [...document.querySelectorAll('.grey')];
function find(ele) {
const index = greys.indexOf(ele);
greys.slice(0, index + 1).forEach((prevElm) => {
prevElm.className = 'red';
});
greys.slice(index + 1).forEach((nextElm) => {
nextElm.className = 'grey';
});
}.red {
background-color: red;
}
.grey {
background-color: yellow;
}<div>
<div onclick="find(this)" class="grey">1</div>
<div onclick="find(this)" class="grey">2</div>
<div onclick="find(this)" class="grey">3</div>
<div onclick="find(this)" class="grey">4</div>
<div onclick="find(this)" class="grey">5</div>
</div>また、インラインハンドラーの動作は非常に奇妙であり、可能な限り避ける必要があることにも注意してください。代わりに、Javascriptを使用してリスナーを適切にアタッチすることを検討してください。
const greys = [...document.querySelectorAll('.grey')];
greys.forEach((elm) => {
elm.addEventListener('click', () => find(elm));
});
function find(ele) {
const index = greys.indexOf(ele);
greys.slice(0, index + 1).forEach((prevElm) => {
prevElm.className = 'red';
});
greys.slice(index + 1).forEach((nextElm) => {
nextElm.className = 'grey';
});
}.red {
background-color: red;
}
.grey {
background-color: yellow;
}<div>
<div class="grey">1</div>
<div class="grey">2</div>
<div class="grey">3</div>
<div class="grey">4</div>
<div class="grey">5</div>
</div>代わりにイベント委任を使用することもできるため、5つの個別のリスナーではなく、1つのリスナーをアタッチするだけで済みます。
const greys = [...document.querySelectorAll('.grey')];
const container = document.querySelector('div');
container.addEventListener('click', ({ target }) => {
if (target.parentElement === container) {
find(target);
}
});
function find(ele) {
const index = greys.indexOf(ele);
greys.slice(0, index + 1).forEach((prevElm) => {
prevElm.className = 'red';
});
greys.slice(index + 1).forEach((nextElm) => {
nextElm.className = 'grey';
});
}.red {
background-color: red;
}
.grey {
background-color: yellow;
}<div>
<div class="grey">1</div>
<div class="grey">2</div>
<div class="grey">3</div>
<div class="grey">4</div>
<div class="grey">5</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加