0

при клике сработала подсветка всех элементов с одинаковым id. срабатывает только первый.

$(".chita").click(function() {
  $("#chita").toggleClass("shadow");
})
$(".krasnoy").click(function() {
  $("#krasnoy").toggleClass("shadow");
})
$(".omsk").click(function() {
  $("#omsk").toggleClass("shadow");
})
.shadow {
  background: rgba(196, 196, 196, 0.4);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div>
  <a href="#" class="*">Все</a>
  <a href="#" class="chita">Чита</a>
  <a href="#" class="krasnoy">Красноярск</a>
  <a href="#" class="omsk">Омск</a>
  <dt id="chita">
            <a href="#">
                <h5>Зав. производством</h5>
            </a>
        </dt>
  <dt id="krasnoy">
            <a href="#"><h5>Старший повар</h5></a>
        </dt>
  <dt id="omsk">
            <a href="#"><h5>Помощник повара</h5></a>
        </dt>
  <dt id="chita">
            <a href="#"><h5>Слесарь</h5></a>
        </dt>
  <dt id="krasnoy">
            <a href="#"><h5>Сантехник</h5></a>
        </dt>
  <dt id="omsk">
            <a href="#"><h5>Прачка</h5></a>
        </dt>
</div>

2
  • В чем смыл использовать тег без родного контейнера <dl><dt></dt><dd></dd></dl>?
    – Air
    21 мар 2019 в 0:30
  • 2
    Не может быть в документе неуникальных идентификаторов id. Для обозначения можете использовать атрибут data-city 21 мар 2019 в 0:32

2 ответа 2

1

$(".chita").click(function() {
  $("#chita").toggleClass("shadow");
})
$(".krasnoy").click(function() {
  $("#krasnoy").toggleClass("shadow");
})
$(".omsk").click(function() {
  $("#omsk").toggleClass("shadow");
})

$(".vse").click(function() {
  $("dt").toggleClass("shadow");
})
.shadow {
  background: rgba(196, 196, 196, 0.4);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div>
  <a href="#" class="vse">Все</a>
  <a href="#" class="chita">Чита</a>
  <a href="#" class="krasnoy">Красноярск</a>
  <a href="#" class="omsk">Омск</a>
  <dt id="chita">
            <a href="#">
                <h5>Зав. производством</h5>
            </a>
        </dt>
  <dt id="krasnoy">
            <a href="#"><h5>Старший повар</h5></a>
        </dt>
  <dt id="omsk">
            <a href="#"><h5>Помощник повара</h5></a>
        </dt>
  <dt id="chita">
            <a href="#"><h5>Слесарь</h5></a>
        </dt>
  <dt id="krasnoy">
            <a href="#"><h5>Сантехник</h5></a>
        </dt>
  <dt id="omsk">
            <a href="#"><h5>Прачка</h5></a>
        </dt>
</div>

6
  • Да автор имел ввиду и то, что не подсвечиваются элементы кроме первого, например при клике на Красноярск должно быть [Старший повар, Сантехник], но там и id-шки неуникальные 21 мар 2019 в 0:41
  • спасибо, что поясняете. не могу разобраться с как правильно с [-id ] , может ссылку на материал по теме или сам код
    – ssv64
    21 мар 2019 в 0:55
  • [<dt data-city="chita">] изменил, как в скрипте прописать правильно [$("chita").toggleClass("shadow");]
    – ssv64
    21 мар 2019 в 1:14
  • @AlexanderLonberg, я там вообще не вижу ни ни уникальный ID ни уникальный ID, о чем речь...?
    – Air
    21 мар 2019 в 1:16
  • @ssv64, вопрос надо задавать так, что бы было понятно, что именно хочет реализовать автор... Тут ясновидящих нет....
    – Air
    21 мар 2019 в 1:18
0

Смотрите, вся проблема в том, что вы используете id чтобы выбрать нужные вам элементы. Всё бы ничего, если не была такая маленькая мелочь, как уникальность атрибута id.

Вот абзац из справочника:

id задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

Конкретно в вашем примере, я бы порекомедовал элементам dt задать другой атрибут, например class или data атрибут по желанию(хотя я всё же рекомендовал бы первый вариант).

$(".chita").click(function() {
  $(".chita-example").toggleClass("shadow");
})
$(".krasnoy").click(function() {
  $(".krasnoy-example").toggleClass("shadow");
})
$(".omsk").click(function() {
  $(".omsk-example").toggleClass("shadow");
})
$(".vse").click(function() {
  $("dt").toggleClass("shadow");
})
.shadow {
  background: rgba(196, 196, 196, 0.4);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div>
    <a href="#" class="vse">Все</a>
    <a href="#" class="chita">Чита</a>
    <a href="#" class="krasnoy">Красноярск</a>
    <a href="#" class="omsk">Омск</a>

    <dl>
        <dt class="chita-example">
            <a href="#"><h5>Зав. производством</h5></a>
        </dt>
        <dt class="krasnoy-example">
            <a href="#"><h5>Старший повар</h5></a>
        </dt>
        <dt class="omsk-example">
            <a href="#"><h5>Помощник повара</h5></a>
        </dt>
        <dt class="chita-example">
            <a href="#"><h5>Слесарь</h5></a>
        </dt>
        <dt class="krasnoy-example">
            <a href="#"><h5>Сантехник</h5></a>
        </dt>
        <dt class="omsk-example">
            <a href="#"><h5>Прачка</h5></a>
        </dt>
    </dl>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.