如何使用JavaScript修改@foreach循环下类的样式？

问题根源 #

你在@foreach循环中给每个链接标签添加了唯一IDlink-colors，但DOM规范中ID必须唯一，导致JavaScript只能获取到循环生成的第一个链接，样式无法作用于所有项。

修复步骤 #

1. 修正HTML结构（移除重复ID）

删除循环内<p>标签的id="link-colors"属性，保留用于标识链接的类user-link：

@foreach($user["links"] as $link)
    <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:{{ $user["link_bg_color"] }};color:{{ $user["link_text_color"] }};"
        >{{ $link["name"] }}</p>
    </div>
@endforeach

2. 修改JavaScript逻辑（批量更新样式）

将原来获取单个ID元素的代码，改为获取所有user-link类元素并遍历更新样式：

// 链接背景色控制
document.getElementById("link_bg_color").addEventListener("input", function() {
    const links = document.querySelectorAll('.user-link');
    links.forEach(link => {
        link.style.setProperty("background-color", this.value, "important");
    });
});

// 链接文字色控制
document.getElementById("link_text_color").addEventListener("input", function() {
    const links = document.querySelectorAll('.user-link');
    links.forEach(link => {
        link.style.setProperty("color", this.value, "important");
    });
});

完整修改后的代码 #

@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">
                                        <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:{{ $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() {
        const links = document.querySelectorAll('.user-link');
        links.forEach(link => {
            link.style.setProperty("background-color", this.value, "important");
        });
    });

// Styling Controller (color)
    document.getElementById("link_text_color").addEventListener("input", function() {
        const links = document.querySelectorAll('.user-link');
        links.forEach(link => {
            link.style.setProperty("color", this.value, "important");
        });
    });

</script>

@endsection

内容的提问来源于stack exchange，提问作者Brendon