Я действительно люблю jquery, который позволяет легко ориентироваться в домах и показывать / скрывать вещи, но если это не работает, кажется, что сложно отлаживать. Я сделал несколько кнопок для выбора текстов. Нажатие основной кнопки переключает текстовые кнопки, что прекрасно работает.

Нажатие текстовой кнопки копирует текст в поле выбора. Однако после скрытия текстовых кнопок основная кнопка не может переключаться снова, чтобы отобразить текстовые кнопки в случае, если пользователь хочет выбрать другой текст.

Кроме того, у меня были проблемы с использованием jQuery parent() и sibling() для перехода от текстового поля к полю выбора. Я исправил это с помощью JS parentElement, но мне интересно, что я сделал не так и как это сделать в jQuery.

Вот мой код, он выглядит очень много, но я хотел оставить CSS, чтобы было проще воссоздать его с фактическими элементами формы кнопки:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        // callback for the onclick event on the choice buttons
        // (not used)
        // copy the text of a choice to the selection field
        function choice(s) {
            var txt = $(s).text();//s.textContent;
            $(s.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);//copies selected text to selection field
            $(s).parent().toggle();//hide(); hides all buttons of the block

            //var d1 = $('div.selection').text();//ok
            //var d9 = $(s).closest('.choiceblock').find('selection').text();
            //var l9 = $(s).closest('.choiceblock').find('selection').length;
            //var d2 = $('div#material_quant div.selection').text();//ok
            //var n2 = $('div#material_quant div.selection').attr('name');
            //var d3 = $('div#material_quant div.choices').siblings('.selection').text();
            //var n3 = $('div#material_quant div.choices').siblings('.selection').attr('name');
            //var l3a = $('div#material_quant div.choices').siblings().length;//?
            //var l3 = $('div#material_quant div.choices').siblings('.selection').length;//0
            //var d4 = $(s).parent().parent().siblings('.selection').text();
            //var n5 = $(s).parent().attr('name');
            //var n6 = $(s).parent().parent().attr('name');
            //var d5 = $(s).attr('name');
            //var d5a = s.nodeName;//DIV
            //var d6 = s.parentElement.className;//ch_qualitative
            //var d7 = s.parentElement.parentElement.className;//choices
            //var d8 = s.parentElement.parentElement.parentElement.nodeName;//DIV
            //var d10 = $(s.parentElement.parentElement.parentElement.nodeName).children('.selection').length;//19
            //$(s.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);//works
            //$(s).parent().parent().siblings('.selection').text(txt);
            return false;
        }
        $(document).ready(function () {
            // click handler on the text buttons
            $('div.choices div.button').click(function () {
                // get the selected text
                var txt = $(this).text();
                // copy selected text to selection field
                $(this.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);
                $(this).parent().hide();
                return false;
            });
            // click handler on the entire block
            $('div#material_quant div.button').click(function () {
                $('div.choices').toggle()
            });
        });
    </script>
    <style>
        div.button {
            float: left;
            height: 2em;
            line-height: 2em;
            width: 6em;
            color: white;
            background-color: darkgreen;
            text-decoration: none;
            display: inline-block;
            margin: 1em;
            text-align: center;
        }
        div.selection {
            display: inline-block;
            height: 2em;
            line-height: 2em;
            margin: 1em;
        }
    </style>
</head>
<body>
    <div id="material_quant" class="choiceblock">
        <div class="button">Materiaal..</div>
        <div class="selection">(geen)</div>
        <div style="clear: both;" />
        <div class="choices">
            <div class="ch_qualitative">
                <div class="button">Veegstof</div>
                <div class="button">Stripmonster</div>
                <div style="clear: both;" />
            </div>
            <div class="ch_quantitative">
                <div class="button">Vloerb</div>
                <div class="button">Isolatie</div>
                <div style="clear: both;" />
                <div class="button">Plaat</div>
                <div class="button">Kit</div>
                <div style="clear: both;" />
                <div class="button">Koord/Vilt</div>
                <div class="button">Bitumen</div>
                <div style="clear: both;" />
                <div class="button">Pakking</div>
                <div class="button">Cement</div>
            </div>
        </div>
    </div>
</body>
</html>

Я также оставил в комментариях мой экспериментальный код jQuery.

-1
Roland 12 Янв 2017 в 19:14

3 ответа

Лучший ответ

Как я уже говорил в комментариях, вы неправильно закрываете теги div.

Замените <div style="clear: both;" /> на <div style="clear: both;"></div>, где бы он ни находился.

Для получения дополнительной информации см .:

  1. Являются ли (не пустые) самозакрывающиеся теги действительными в HTML5?
  2. Разрешено ли иметь самозакрывающийся тег div в HTML-документе?
1
Community 23 Май 2017 в 12:16

Я думаю, проблема в том, что ваша верхняя кнопка переключает «выборы», а ваш список кнопок переключает «ch_qualitative».

Изменить: Измените $ (this) .parent () на $ (this) .parent (). Parent (), и это должно решить вашу проблему

0
Michael Radzwilla 12 Янв 2017 в 17:00

Проблема заключается в использовании $ (this) .parent (). Hide () для события click. Вы должны убедиться, что скрываете div, что кнопка «Materiaal» «переключается». Изменение только этой строки работает:

$(this).parent().hide();

Для этого:

$('div.choices').hide();

Кроме того, вы должны написать конкретно тег закрытия div на «clear: both»:

<div style="clear: both;"></div>
0
Marc 12 Янв 2017 в 17:01