Блог

Главная - Вопросы по программированию - Как мне сделать цвет серым при выборе первого элемента поля выбора

Как мне сделать цвет серым при выборе первого элемента поля выбора

#jquery #tailwind-css

Вопрос:

У меня есть 3 поля выбора, все они имеют один и тот же класс. В поле выбора, которое я пытаюсь сделать, если выбран первый элемент, цвет текста должен быть серым, если выбраны остальные, цвет текста должен быть белым.

Я пробовал это с помощью jquery и tailwindcss.

МОЙ HTML-КОД :

  <div class="text-white grid grid-cols-2 px-4 gap-4">
            <select class="focus:outline-none focus:ring-0 border-gray-500 rounded-md bg-transparent first-child-gray-select text-gray-500" required>
                <option value="" class="bg-primary text-gray-500" disabled hidden selected>Ülke...</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
            </select>
            <select class="focus:outline-none focus:ring-0 border-gray-500 rounded-md bg-transparent first-child-gray-select text-gray-500" required>
                <option value="" class="bg-primary text-gray-500" disabled hidden selected>Şehir...</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
            </select>
            <select class="focus:outline-none focus:ring-0 border-gray-500 rounded-md bg-transparent first-child-gray-select text-gray-500" required>
                <option value="" class="bg-primary text-gray-500" disabled hidden selected>İlçe...</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
            </select>

</div>

МОЙ КОД CSS :

   [hidden] {
    display: none;
}

МОЙ JS-КОД: (JQUERY)

 $(".first-child-gray-select").each((select) => {
$(select).on("change", function () {
    console.log("sea");
    if ($(select   "option:selected").hasClass("text-white")) {
        $(select).removeClass("text-gray-500");
        $(select).addClass("text-white");
    }
});
});

Когда я редактирую код таким образом, когда я выбираю опцию, он меняет цвет всех полей выбора.

 $(".first-child-gray-select").change(function () {
    if ($(".first-child-gray-select option:selected").hasClass("text-white")) {
        $(".first-child-gray-select").removeClass("text-gray-500");
        $(".first-child-gray-select").addClass("text-white");
    }
});

Ответ №1:

Если вы не слишком привязаны к jQuery, я хотел бы предложить это решение с помощью AlpineJS. AlpnineJS — это облегченный фреймворк утилиты Javascript, который часто называют попутным ветром для JS. Для достижения «простых» результатов, подобных этому, он отлично работает.

Предлагаемое ниже решение основано на двух функциях AlpineJS: x-model и x-bind 

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
    <div class="p-4">
        <div x-data="{
            select1: 's1_A',
            select2: 's2_A',
            select3: 's3_A',
        }">
            <select name="s1" id="id_s1" class="border-2 p-4 rounded-xl" x-model="select1" :class="select1 == 's1_A' ? 'text-blue-800' : 'text-gray-800'">
                <option value="s1_A" class="text-gray-800">Select 1: Option 1</option>
                <option value="s1_B" class="text-gray-800">Select 1: Option 2</option>
                <option value="s1_C" class="text-gray-800">Select 1: Option 3</option>
            </select>
            <select name="s2" id="id_s2" class="mt-4 border-2 p-4 rounded-xl" x-model="select2" :class="select2 == 's2_A' ? 'text-blue-800' : 'text-gray-800'">
                <option value="s2_A" class="text-gray-800">Select 2: Option 1</option>
                <option value="s2_B" class="text-gray-800">Select 2: Option 2</option>
                <option value="s2_C" class="text-gray-800">Select 2: Option 3</option>
            </select>
            <select name="s3" id="id_s3" class="mt-4 border-2 p-4 rounded-xl" x-model="select3" :class="select3 == 's3_A' ? 'text-blue-800' : 'text-gray-800'">
                <option value="s3_A" class="text-gray-800">Select 3: Option 1</option>
                <option value="s3_B" class="text-gray-800">Select 3: Option 2</option>
                <option value="s3_C" class="text-gray-800">Select 3: Option 3</option>
            </select>
        </div>
    </div>
</body>

Я реализовал решение, в котором текст синего цвета, когда выбран первый вариант, и серый в противном случае, поиграйте с классами tailwindcss, чтобы он соответствовал вашим потребностям 🙂

Комментарии:

1. Большое вам спасибо за ваш ответ. Я использую alpine.js во многих местах моего проекта, как я мог не подумать об этом 🙂

Метки: ,