Это расширение для другого сообщения ( как обнаружить кнопку в расширенной строке аккордеона ).
После добавления некоторых дополнительных строк в разделе деталей моего аккордеонного управления и перемещения кнопки «Выбрать» в отдельный div, я получаю только значения из первой строки аккордеона. Это была моя оригинальная проблема. Чтобы подтвердить, что исходное решение сработало, если я переместил свою кнопку «Выбрать» в поле сохранения, содержащее метку для «Место», он передает правильную метку местоположения («labelAccordionLocation») для того, что когда-либо была расширена, но всегда проходит первый имя метки метки строки. Он также работает корректно, если кнопка «Выбрать» находится в значении сохранения как метка «Имя» («labelAccordionName»).
Основываясь на предположении в моем другом сообщении (которое безупречно работало для моего первоначального примера), мне кажется, что мне теперь нужно выяснить, как идентифицировать div, содержащий каждую метку, чтобы я мог передать ее значение, когда кнопка «Отправить» щелкнул. Хотя, это все еще просто образ мышления любителя.
<div class="accordion" id="accordion2"> <?php // SQL stuff here... $group = null; while ($row = odbc_fetch_array($db)) { if ($row['Name'] != $group) { echo "<div class='accordion-heading'>"; echo "<a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion2' href='#", $row['Number'],"'> <button id='buttonAccordionToggle' data-target='#", $row['Number'],"'>", $row['Name'],"</button></a>"; echo "</div>"; echo "<div id='", $row['Number'],"' class='accordion-body collapse'>"; echo "<div class='accordion-inner'>"; echo "<div class='control-group' style='min-height: 50px'>"; echo "<div class='row-fluid show-grid'>"; echo "<div class='span12'>"; echo "<div class='span1'>"; echo "<label>Name:</label>"; echo "</div>"; echo "<div class='span11'>"; echo "<label id='labelAccordionName'>", $row['Name'],"</label>"; echo "</div>"; echo "</div>"; echo "</div>"; echo "<div class='row-fluid show-grid'>"; echo "<div class='span12'>"; echo "<div class='span1'>"; echo "<label>Location:</label>"; echo "</div>"; echo "<div class='span11'>"; echo "<label id='labelAccordionLocation'>", $row['Location'],"</label>"; echo "</div>"; echo "</div>"; echo "</div>"; echo "<div class='row-fluid show-grid'>"; echo "<div class='span12'>"; echo "<a id='select' class='btn'>Select</a>"; echo "</div>"; echo "</div>"; echo "</div>"; echo "</div>"; echo "</div>"; $group = $row['Name']; } } } ?> </div> <div id="divDetails" style="display: none;"> <label>Name:</label> <label id="labelName"></label><br /> <label>Location:</label> <label id="labelLocation"></label><br /> <a id="close" class="btn">Close</a> </div> <script> // Hide the accordion and show the hidden div $('a.btn').click(function() { $('#accordion2').hide(); $('#divDetails').show(); // Pass the label value from the accordion row to the hidden div label $('#labelName').html($('.accordion-body.in .labelAccordionName').html()); $('#labelLocation').html($('.accordion-body.in .labelAccordionLocation').html()); }); // Hide the div and show the accordion again $('#close').click(function() { $('#accordion2').show(); $('#divDetails').hide(); }); // Only allows one row to be shown at a time $('.accordion-toggle').click(function() { var $acc = $('#accordion2'); $acc.on('show', '.collapse', function() { $acc.find('.collapse.in').collapse('hide'); }); }); $(document).ready(function(){ // On dropdown change, pass in value to populate accordion/details $('#dd').change(function() { var r = $(this).val(); location.href = "test.php?src=" + r; }); }); </script> Я сделал некоторые поиски на сайте jQuery, чтобы попытаться понять это, но, к сожалению, не смог заставить его работать. Я сделаю все возможное, чтобы предоставить любую дополнительную информацию, которая необходима.
Правки
Я изменил ярлык на использование классов вместо id. Хотя большое предложение, мне не пришлось применять новый класс «activeAccordion». Поскольку класс 'in' применяется к расширенной строке, я смог использовать его для доступа, как показано ниже. Я также обновил jsFiddle и предоставил ссылку внизу.
$('a.btn').click(function() { $('#accordion2').hide(); $('#divDetails').show(); $('#labelName').html($('.accordion-body.in .labelAccordionName').html()); $('#labelLocation').html($('.accordion-body.in .labelAccordionLocation').html()); });
Работа jsFiddle
http://jsfiddle.net/N8JuQ/
при генерации html с php, если вы повторяете, будьте осторожны с идентификаторами. Никогда не создавайте одинаковый идентификатор в DOM, он плохо разбирается в вещах. (т. е. select, labelAccordionName, buttonAccordionToggle) Я предлагаю использовать классы или генерировать уникальные идентификаторы плюс общий класс
вы должны иметь что-то вроде:
<div class="accordion" id="accordion2"> <?php // SQL stuff here... $group = null; while ($row = odbc_fetch_array($db)) { if ($row['Name'] != $group) { echo "<div class='accordion-heading'>"; echo "<a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion2' href='#", $row['Number'],"'> <button class='buttonAccordionToggle' data-target='#", $row['Number'],"'>", $row['Name'],"</button></a>"; echo "</div>"; echo "<div id='", $row['Number'],"' class='accordion-body collapse'>"; echo "<div class='accordion-inner'>"; echo "<div class='control-group' style='min-height: 50px'>"; echo "<div class='row-fluid show-grid'>"; echo "<div class='span12'>"; echo "<div class='span1'>"; echo "<label>Name:</label>"; echo "</div>"; echo "<div class='span11'>"; echo "<label class='labelAccordionName'>", $row['Name'],"</label>"; echo "</div>"; echo "</div>"; echo "</div>"; echo "<div class='row-fluid show-grid'>"; echo "<div class='span12'>"; echo "<div class='span1'>"; echo "<label>Location:</label>"; echo "</div>"; echo "<div class='span11'>"; echo "<label class='labelAccordionLocation'>", $row['Location'],"</label>"; echo "</div>"; echo "</div>"; echo "</div>"; echo "<div class='row-fluid show-grid'>"; echo "<div class='span12'>"; echo "<a class='select btn'>Select</a>"; echo "</div>"; echo "</div>"; echo "</div>"; echo "</div>"; echo "</div>"; $group = $row['Name']; } } } ?> </div> <div id="divDetails" style="display: none;"> <label>Name:</label> <label id="labelName"></label><br /> <label>Location:</label> <label id="labelLocation"></label><br /> <a id="close" class="btn">Close</a> </div> <script>
что-то вроде этого, не проверял, поскольку вы не предоставили jsfiddle. Что касается ваших данных для правильной загрузки, я бы предложил добавить класс в активный аккордеон-тело, тогда в ваших находках этот класс используется для выбора правильного элемента:
$('.accordion-toggle').click(function() { var $acc = $('#accordion2'); $('.activeAccordion').removeClass('activeAccordion'); $(''+$(this).next('.buttonAccordionToggle').data('target')).addClass('activeAccordion'); $acc.on('show', '.collapse', function() { $acc.find('.collapse.in').collapse('hide'); }); });
затем используйте этот новый класс:
$('#labelName').html($('accordion-body.activeAccordion .labelAccordionName').html())); $('#labelLocation').html($('accordion-body.activeAccordion .labelAccordionLocation').html()));
Вы должны рассмотреть возможность выхода из PHP в ваш оператор if и только вернуться обратно, чтобы повторить переменные. Также прочитайте альтернативный синтаксис: http://php.net/manual/en/control-structures.alternative-syntax.php
while ($row = odbc_fetch_array($db)) { if ($row['Name'] != $group){ ?> <div class='accordion-heading'> <a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion2' href='#", <?php echo $row['Number']; ?>,"'> <button id='buttonAccordionToggle' data-target='#", <?php echo $row['Number']; ?>,"'>", <?php echo $row['Name']; ?>,"</button></a> </div> <div id='", <?php echo $row['Number']; ?>,"' class='accordion-body collapse'> <div class='accordion-inner'> ... ... ... <?php } ?>