Как мне управлять переключателями с помощью стандартного элемента HTML button?

ProgramBox

Как мне управлять переключателями с помощью стандартного элемента HTML button?

Post author:admin
Запись опубликована:15 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #jquery #leaflet

#javascript #HTML #jquery #брошюра

Вопрос:

Я использую leaflet и их встроенные контроллеры, которые добавляют HTML-элементы, затрудняющие их перепроектирование. Я хочу написать скрипт, который позволит мне активировать / деактивировать каждый переключатель с помощью <button onclick="function"> , чтобы я мог оформить свою собственную панель управления. Вот фрагмент из листовки:

 <div class="leaflet-control-layers-base">
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> All Activities</span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons1">Beaches</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons2">Wading pools</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons3">Swimming pools</span></span></div>
    </label>
</div>

У меня возникают проблемы с выбором одного ввода за раз при этом:

   var x = $('leaflet-control-layers-selector.eq(0)').checked;

Я также пытался $('.leaflet-control-layers-selector:nth-of-type(1)').checked; с небольшим успехом. Как мне выбрать один за другим?

1. Что это должно быть .on ?

2. Также <div> внутри <label> недопустим HTML5, поскольку модель Label является частью формулировки содержимого

3. Кроме того, leaflet-control-layers-selector выбор as аналогичен таргетингу на тег пользовательского элемента, подобный <leaflet-control-layers-selector> , что не в вашем случае. У вас есть селектор класса , поэтому используйте селектор класса: .leaflet-control-layers-selector

4. @RokoC. Булджан спасибо за комментарии. Я знаю, что <div> в <label> — плохая практика. Для меня это была большая головная боль. Как я уже упоминал, я не могу написать этот HTML. Это приходит прямо из библиотеки leaflet подобным образом, и мне просто нужно с этим работать. Значение .on должно быть .checked, но по какой-то причине оно всегда возвращает значение undefined.

5. @RokoC. Булджан, ты очень хорошо подметил, что это сбивает с толку, позволь мне это исправить и опубликовать. Изменения в процессе

Ответ №1:

Если стиль — ваша единственная проблема, но позиции элементов в порядке, почему бы не использовать чистый CSS?

 .leaflet-control-layers-base label input[type=radio] {
  position: absolute;
  overflow: hidden;
  border: 0;
  height: 1px;
  width: 1px;
  clip: rect(0 0 0 0);
}

.leaflet-control-layers-base label input[type=radio] span:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin-right: 0.5em;
  
  transition: 0.25s;
  box-shadow: inset 0 0 0 2px #000;

}

.leaflet-control-layers-base label input[type=radio]:checked span:before {
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 5px gold, inset 0 0 0 1em #000;
}

 <div class="leaflet-control-layers-base">
  <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> All Activities</span></div>
    </label>
  <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons1">Beaches</span></span></div>
    </label>
  <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons2">Wading pools</span></span></div>
    </label>
  <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons3">Swimming pools</span></span></div>
    </label>
</div>

1. У меня есть полный рабочий пример того, как я его оформил по ссылке. Меня беспокоит то, чтобы он соответствовал другому стилю и анимации, которые я создал с <button> помощью в других местах сайта. leksplay.com/waterplaymap (редактировать: и из-за дополнительного <div> трудно правильно редактировать метки).

2. @MichaelPerna извините. Я потерял тебя : Ваш сайт кажется довольно приятным и веселым. PS у вас просто проблема с leksplay.com/playgroundmap — Три параметра проверены, но маркеры не видны на карте.

3. Не проблема, эта конкретная карта показывает все контакты, соответствующие всем выбранным критериям. Я все еще экспериментирую с картами и фильтрацией, поэтому я здесь, ха-ха.

4. @MichaelPerna невероятно, что leaflet использует недопустимую разметку. Никогда не следует использовать :before или :after псевдонимы для <input> элемента (как они это делают). (Как я уже сказал) <div> никогда не должен оказаться внутри <label> el. Извините за ярость… вам следует высказать некоторые серьезные опасения по поводу этого плагина (если я не упускаю чего-то очевидного) и отправить отчеты об ошибках / улучшениях в их репозиторий Git. Вы можете дать ссылку на этот вопрос и мои комментарии. Это возмутительно. Следующее, что я ожидаю увидеть, это leaflet-foo атрибуты вместо допустимых данных -* единицы…

5. @MichaelPerna Я все еще не знаю, какого желаемого стиля ввода вы хотите достичь… В любом случае, я уже потерял слишком много времени на это, и я думаю, что пока я не настолько полезен.

Ответ №2:

Попробуйте удалить ваши divs из ваших меток. Вероятно, это и является причиной вашей проблемы. Div является блочным элементом, поэтому не может входить внутрь метки, которая будет принимать только формулировку. (Хотя ваши интервалы должны быть в порядке).

1. Могу ли я избавиться от них <div> с помощью jQuery или Javascript?

2. @MichaelPerna <div> внутри <label> недопустимый синтаксис, но не основная причина вашей проблемы. Этот ответ на самом деле не более чем повторение уже присутствующего комментария.