#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>
недопустимый синтаксис, но не основная причина вашей проблемы. Этот ответ на самом деле не более чем повторение уже присутствующего комментария.