Как я могу создать элемент, который переключается между двумя значениями при нажатии?

Question

Учитывая два пролета, как это:

<span>Click for info</span>
<span style="display: none">Here is a big long string of info blah blah</span>

... Мне бы хотелось, чтобы к каждому из них была прикреплена функция onclick, чтобы посетитель увидел «Click for info», а затем, когда он щелкнул по нему, первый промежуток скрыт, а второй не скрыт. И, конечно же, когда нажимается вторая кнопка, все возвращается к исходному состоянию.

У меня нет способа легко генерировать уникальные идентификаторы, поэтому я бы предпочел избегать маршрута getElementByID (), и я бы предпочел не использовать jQuery или какую-либо другую тяжелую зависимость. Есть ли элегантный способ сделать это?

Лучшая идея, которую я имею до сих пор, - написать функцию toggleAllSiblings (), установить для этой функции onclick для обоих элементов в паре, а затем обернуть каждую пару в родительский элемент.

Можно ли это сделать без родительского узла?

Answer 1

Если вы действительно хотите обойтись без идентификаторов, вы можете сделать что-то вроде этого:

<script>
function togglePrevious(sender) {
    sender.previousSibling.style.display = "inline";
    sender.style.display = "none";
}
function toggleNext(sender) {
    sender.nextSibling.style.display = "inline";
    sender.style.display = "none";
}
</script>
<span onclick="javascript:toggleNext(this);">Click for info</span>
<span onclick="javascript:togglePrevious(this);" style="display:none">Info blablabla</span>

И, пожалуйста, помните, что вам не следует использовать «inline» вместо «block», если вы используете span, поскольку они являются встроенными элементами. Установка их стиля отображения, чтобы заблокировать, заставит их быть div.

Answer 2

Еще одна версия, прогрессивное улучшение - будет правильно отображать полную информацию, когда JavaScript отключен.

<span class="details">Here is a big long string of info blah blah</span>

<script type="text/javascript">
    // Open/close span behaviour
    //
    function infoToggle(span) {
        var ersatz= document.createElement('span');
        ersatz.appendChild(document.createTextNode('Click for info...'));
        span.parentNode.insertBefore(ersatz, span);
        span.style.display= 'none';

        span.onclick= function() {
            ersatz.style.display= 'inline';
            span.style.display= 'none';
        };
        ersatz.onclick= function() {
            ersatz.style.display= 'none';
            span.style.display= 'inline';
        };
    }

    // Bind to all spans with class="details"
    //
    var spans= document.getElementsByTagName('span');
    for (var i= spans.length; i-->0;)
        if (spans[i].className=='details')
            infoToggle(spans[i]);
</script>

Answer 3

Так же, как дополнительная заметка, когда вы разрабатываете JavaScript, который включает в себя создание элементов в DOM. Если вы не собираетесь использовать что-то вроде jQuery (я не фанат фреймворков, слишком тяжелых и неспецифичных), попробуйте использовать функцию, чтобы сделать ваши элементы для вас, чтобы у вас не было слишком много избыточных линии, как это делает ваши сценарии действительно тяжелыми.

Я лично использую фрагмент кода, который нашел здесь www.dev-explorer.com / articles / create-dom-object , но вы можете найти то, что подходит вам лучше. Если ваш сайт загружается быстрее, пользователю не нужно ждать так долго событий загрузки и т. Д., И, как правило, он не раздражается так просто.

Надеюсь, это имело смысл Спасибо, Scarlet

Answer 4

быстрая переделка @Jason:

<script>
function toggle(targetId, sender)
{
var show = document.getElementById(targetId);

show.style.display = "block";
sender.style.display = "none";
}
</script>

<span onclick="javascript: toggle('more', this);" id="less">click         here</span>

<span style="display:none;" id="more" onclick="javascript: toggle('less', this);" >foooooooooooooooooooooo</span>

Answer 5

Я бы предпочел не использовать jQuery или любую другую тяжелую зависимость.

Я не знаю, хороший ли это подход. Если вы не можете приписать какую-либо реальную проблему производительности использованию jQuery или prototype.js (которые не так уж и тяжелы), вы должны их использовать.

В противном случае вы просто потратите много времени на повторяющуюся печать и исправление неприятных ошибок браузера и несовместимости.

У меня нет способа легко генерировать уникальные идентификаторы

Опять же, вы действительно хотите $$ ('div span ［someParam = что-то］') . И поскольку библиотеки отправляют это в функции запросов встроенного браузера, если они доступны, вероятно, это даже не медленнее, чем решение с ручной кодировкой. Определенно более удобное в обслуживании.

Answer 6

Это с моей головы и не проверено. Это должно заставить вас идти по крайней мере.

<script>
function toggle(id)
{
var display = document.getElementById(id).style.display;
if ( display == "block" )
document.getElementById(id).style.display = "none";
else
document.getElementById(id).style.display = "block";
}
</script>

<span onclick="javascript: toggle('span_to_toggle');" id="clickable_span">click here</span>

<span id='span_to_toggle' style="diplay:none">foooooooooooooooooooooo</span>

Answer 7

Я не уверен в реализации, но логика будет похожа на

• Получить все пролеты
• Скрыть соседние пролеты ниже (оставьте их видимыми для не Пользователи JS по умолчанию)
• Прикрепить даже обработчик первого пролета
• Обработчик событий функция - показать следующий промежуток, если следующий промежуток невидим, в противном случае скрыть его