javascript - 动态更改标签和占位符取决于加载的 html

Question

我在后端使用 jquery 和 laravel。我有加载在两个 php Blade 上的搜索栏。我希望占位符和标签动态变化取决于加载的 php Blade 文件。这就是它现在的样子，它只显示第一个标签和占位符，甚至在 Blade 中不存在的 id 中它也显示第一个标签和占位符。

HTML/BLADE.PHP

<div class="container">
    <div class="row">
        <div class="show-hide-section">
            <button class="btn btn-success show-hide-search-bar">Pokaż wyszukiwarkę</button>
        </div>
        <div class="col-xs-12 col-md-12">
            <div class="searcher-section" style="display: none">
                <div class="show-hide-searcher">
                    <div class="input-section">

                        <div class="label-input-searcher">
                            <label for="" class="searcher-label" id="label-searchbar"></label>

                            <input type="text" placeholder="" class="searcher-input form-control" id="input-searchbar" />
                            <div class="null-data" style="display: none;">Wprowadź poprawne dane</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS

if ($('#agents') !== null) {
    $('#label-searchbar').html('Imię, Nazwisko, Adres email');
    $('#input-searchbar').attr('placeholder','Podaj imię, nazwisko lub adres email');
} else if ($('#company') !== null) {
    $('#label-searchbar').html('Nazwa biura');
    $('#input-searchbar').attr('placeholder','Podaj nazwę biura');
}

Answer 1

使用.length jQuery 对象的属性来检查元素是否存在。 $(selector) 将返回一个永远不会为 null 的 jQuery 对象。

if ($('#agents').length > 0) {
    $('#label-searchbar').html('Imię, Nazwisko, Adres email');
    $('#input-searchbar').attr('placeholder','Podaj imię, nazwisko lub adres email');
} else if ($('#company').length > 0) {
    $('#label-searchbar').html('Nazwa biura');
    $('#input-searchbar').attr('placeholder','Podaj nazwę biura');
}