Как получить значение выбранного элемента в jquery accordion и отобразить его?

I am using the jQuery Accordion with reference from here

При нажатии элементов в моем разделе (заголовок), я хочу отобразить в нижнем формате

Section # -> item # in my label as text (like breadcrumb).

Я попробовал google, и у меня есть ключ к использованию

var active = $('.selector').accordion('option', 'active'); 

Но у меня нет идеи, как это использовать. Я новичок в JQuery. Пожалуйста помоги.

Мой код ниже:

           $(function() {
                $("#accordion").accordion({
                    heightStyle: "content"
                });  
            }); 
        </script>  

                        <div id="accordion">
                            

Section 1

<div> Item 1

Item 2 </div>

Section 2

<div> Item 3

Item 4 </div> </div>
0
nl ja de

2 ответы

Попробуйте приведенный ниже код:

$("#accилиdion").bind("click", function() {

    alert($("h3[aria-expanded='true']",this).text());

});

или

$("#accилиdion h3").bind("click", function() {

    alert($(this).text());

});
2
добавлено
Это не работает. Я получаю пустое поле сообщения каждый раз
добавлено автор Anuya, источник
@Anuya: попробуйте второй
добавлено автор Vishwajeet, источник
@Vishwajeet: Спасибо. Это то, что я искал, второй работал для меня с jQuery - v3.2.1 и jQuery UI - v1.12.1.
добавлено автор Indrabhushan, источник

Вот

$('.selector').accordion('option', 'active'); 
 --^^^^^^^^^---this is accordion selector.. in your case it is <div id="accordion"> so use #accordion.

use text() or html() to replace the active value in

 $('#lbl_selectedValue').text();
 --^^^^^^^^^^^^^^^^^^^^--- label selector with id as lbl_selectedValue

try this

 $(function() {
    $("#accordion").accordion({
                heightStyle: "content"
    });  

    var activeAccordion=$( "#accordion" ).accordion( "option", "active" );
    $('#lbl_selectedValue').text($("#accordion h3").eq(activeAccordion).text()); //"OR $('#lbl_selectedValue').html(activeAccordion);

    $(".accordion-header").on("click", function() { 
         var activeClickAccordion=$( "#accordion" ).accordion( "option", "active" );
         $('#lbl_selectedValue').text($("#accordion h3").eq(activeClickAccordion).text());
    })
 });     

updated

give your label a class and try it..


and your selector.

$('.lbl_selectedValue').text($("#accordion h3").eq(activeAccordion).text());
0
добавлено
Я попытался использовать это. Мой аккордеон не работает и ни код. Все заголовки расширены и несовместимы
добавлено автор Anuya, источник
все еще не получая значение для маркировки. Но Аккордеон работает. Спасибо за ваши усилия. Пожалуйста, дайте мне знать, как решить эту проблему.
добавлено автор Anuya, источник
при загрузке страницы значение равно 0 и остается неизменным, когда я нажимаю элементы. Я сделал то, что вы предложили.
добавлено автор Anuya, источник
при загрузке страницы я получаю «Раздел 1» в ярлыке. Но после нажатия всех элементов оно остается неизменным. Мне нужно имя элемента и имя раздела при нажатии на элемент. Это код, который я использовал.
добавлено автор Anuya, источник
добавлено автор Anuya, источник
<script> $ (function() {$ ("# accordion"). accordion ({heightStyle: "content"}); var activeAccordion = $ ("# accordion"). accordion ("option", "active"); $ ('. lbl_selectedValue'). text ($ ("# accordion h3"). eq (activeAccordion) .text ()); $ ("# accordion"). on ("click", function() {$ (' #lbl_selectedValue '). text ($ (this) .accordion (' option ',' active '));})});
добавлено автор Anuya, источник
Такое же поведение, как и раньше: при загрузке страницы я получаю «Раздел 1» в ярлыке. Но после нажатия всех элементов оно остается неизменным.
добавлено автор Anuya, источник
да мой плохой извините ..... обновил мой ответ ... попробуйте ..
добавлено автор bipen, источник
обновленный ответ .. попробуйте это .. и дайте мне знать
добавлено автор bipen, источник
обновил мой ответ снова, пожалуйста, проверьте ...
добавлено автор bipen, источник
изменение в событии клика тоже ... `$ ('. accordion-header'). on (" click ", function() {$ ('# lbl_selectedValue'). text ($ (" # accordion h3 "). eq ( activeAccordion) .text ());}) `
добавлено автор bipen, источник
проверьте обновленный ... $ (". accordion-header"). on ("click", function() {.... part .. замените этот код своим onclick, это должно работать. ...
добавлено автор bipen, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda