是否有一种方法来改变@foreach标签下的类的样式使用JavaScript?

Question

我一直在摆弄一个项目，似乎找不到解决方案…可能是睡眠不足，也可能只是我错过了一些非常明显的东西。

这里的关键是我目前正在更改ID的样式…不是一个类。该ID应用于@foreach链中的第一个链接，但由于它是ID而不是Class，因此它不会将样式应用于@foreach中列出的所有项目(只是第一个)。

不确定在这里发布代码是否会有所帮助，因为它是基于我在数据库中的表，但也许有人可以伸出援助之手，无论如何。

问题是在@foreach和<script>标签下的最后两个函数。

@extends('layouts.app')
@section('content')
<style>
.link-window {
zoom:70%; }
.phone-width {
border-radius:10px; }
.form-control {
height:30px;
padding:0!important;
border:none!important;
border-radius:0!important;
display:inline-block; }
.form-group label {
float:center; }

@media (max-width:768px) {
.phone-width {
width:calc(100% - 24px);
margin-top:20px;
}
}
</style>

<div class="container">
<div class="row">
<div class="col-12 card p-3">
<h2 class="card-title">User Settings</h2>
<form action="/dashboard/settings" method="post">
<div class="row">
<div class="col-12 col-md-5">
<div class="form-group">
<label for="page_bg_color">Page Background Color</label>
<input type="color" id="page_bg_color" name="page_bg_color" class="form-control{{ $errors->first('page_bg_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->page_bg_color }}">
@if($errors->first('page_bg_color'))
<div class="invalid-feedback">{{ $errors->first('page_bg_color') }}</div>
@endif
</div>
<div class="form-group">
<label for="page_text_color">Page Text Color</label>
<input type="color" id="page_text_color" name="page_text_color" class="form-control{{ $errors->first('page_text_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->page_text_color }}">
@if($errors->first('page_text_color'))
<div class="invalid-feedback">{{ $errors->first('page_text_color') }}</div>
@endif
</div>
<div class="form-group">
<label for="link_bg_color">Link Background Color</label>
<input type="color" id="link_bg_color" name="link_bg_color" class="form-control{{ $errors->first('link_bg_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->link_bg_color }}">
@if($errors->first('link_bg_color'))
<div class="invalid-feedback">{{ $errors->first('link_bg_color') }}</div>
@endif
</div>
<div class="form-group">
<label for="link_text_color">Link Text Color</label>
<input type="color" id="link_text_color" name="link_text_color" class="form-control{{ $errors->first('link_text_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->link_text_color }}">
@if($errors->first('link_text_color'))
<div class="invalid-feedback">{{ $errors->first('link_text_color') }}</div>
@endif
</div>
<div class="col-12">
@csrf
<button type="submit" class="btn btn-primary mt-3{{ session('success') ? ' is-valid' : '' }}">Save Settings</button>
@if(session('success'))
<div class="valid-feedback">{{ session('success') }}</div>
@endif
</div>
</div>
<div id="page-bg-color" class="col-12 col-md-6 mx-auto phone-width" style="background-color:{{ $user["page_bg_color"] }};">
<div class="link-window py-5">
<div class="row">
<div class="main-content text-center py-3">
<h2 class="fw-bold">{{ $user["main_name"] }}</h2>
<p>Description Text</p>
</div>
</div>
<div class="row">
@foreach($user["links"] as $link)
<div class="link">
{{-- What I am styling --}}
<p
id="link-colors"
class="user-link d-block p-3 mb-3 mx-4 h5 text-center"
target="_blank"
rel="nofollow"
style="border-radius:10px;background-color:{{ $user["link_bg_color"] }};color:{{ $user["link_text_color"] }};"
>{{ $link["name"] }}</p>
</div>
@endforeach
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
document.getElementById("page_bg_color").addEventListener("input", function() {
document.getElementById("page-bg-color").style.backgroundColor = this.value;
});
document.getElementById("page_text_color").addEventListener("input", function() {
document.getElementById("page-text-color").style.color = this.value;
});
// Styling Controller (background-color)
document.getElementById("link_bg_color").addEventListener("input", function() {
document.getElementById("link-colors").style.setProperty("background-color", this.value, "important");
});
// Styling Controller (color)
document.getElementById("link_text_color").addEventListener("input", function() {
document.getElementById("link-colors").style.setProperty("color", this.value, "important");
});
</script>
@endsection

我试过使用。getelementbyclassname，它没有工作。

Answer 1

您可以尝试在document.getElementByClassName之后使用for循环吗?

:

<script>
const elements = document.getElementsByClassName('text');
for(const i in elements) {
elements[i].style.color='red';
}
</script>

Answer 2

在foreach循环中，它看起来像是对该循环中的每个段落使用相同的id。您不能重用id。在javascript中，你可以使用querySelector，它会指向第一个匹配的元素。

在我的回答中，我添加了一个名为links的新类到foreach的父类。然后使用querySelector来引用links下面的FIRST链接。

let firstLink = document.querySelector(".links .link p");

document.querySelector("#link_text_color").addEventListener("input", (e) => {
firstLink.style.setProperty("color", e.target.value, "important");
})

.link p {
padding: 10px;
}

<input id="link_text_color">
<div class="row links">
<div class="link">
<p class="user-link d-block p-3 mb-3 mx-4 h5 text-center" target="_blank" rel="nofollow" style="border-radius:10px;background-color:red;color:white">name</p>
</div>
<div class="link">
<p class="user-link d-block p-3 mb-3 mx-4 h5 text-center" target="_blank" rel="nofollow" style="border-radius:10px;background-color:gray;color:black">name 2</p>
</div>
</div>