Wordpress를 사용하는 동안 사이드 바 탐색에서 jQuery-UI 아코디언 항목으로 어떻게 딥 링크 할 수 있습니까?

Question

이것은 내 첫 S.O입니다. 질문을 보내 주셔서 감사합니다. 나는 건설적인 종류의 아이디어와 비판에 열려 있습니다.

내 문제는 다음과 같습니다. 기본 컨텐트 영역에 jQuery UI Accordion Widget이 있고 각 아코디언 헤더에 해당하는 링크가있는 사이드 바 메뉴가있어서 사이드 바 메뉴에서 딥 링크 할 수있는 가능성이 있습니다. 왼쪽 사이드 바 메뉴를 아코디언의 항목에 추가합니다. 가장 위대한 UI가 아니며, 내가 이미 알고있는 방식으로 아코디언의 목적을 무효로합니다. —. 그러나, 나는 여전히 다른 응용 프로그램을위한 배열 기능을 이해하는 것이 유용 할 것이라고 생각합니다.

웹 사이트는 Wordpress에 있으므로 맞춤형 게시물 유형을 사용하여 아코디언 요소와 사이드 바 링크가 클라이언트에 추가되거나 제거됩니다. 따라서, 이것은 배열을 사용하여 정착 한 접근법입니다. 문제를보다 쉽고/효율적으로 처리 할 수있는 방법을 생각해 보면 알려주세요.

내 아코디언 코드 (나는 간결에 대한 WP_Query 루프를 제거했습니다) 다음과 같습니다

<div id="accordion"> 
    <h1><?php the_title(); ?></h1> 
    <div><?php the_content(); ?></div> 
</div> 

내 왼쪽 사이드 바 코드는 다음과 같습니다 (다시, 내가 루프를 제거했습니다) :

<h1 class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="0"> 
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> 
    "The title from Wordpress" 
</h1> 

: 워드 프레스와 아코디언 위젯 페이지로드 작업을 수행 할 때

<ul class="resources-nav"> 
    <li><a href=""><?php the_title(); ?></a></li> 
</ul> 

지금, 그들은 헤더 요소에이 코드를 생성

보시다시피 헤더 ID는 id="ui-id-1"입니다. 아코디언의 각 헤더 요소에 대해이 ID는 id="ui-id-3", 그 다음은 id="ui-id-5" 등으로 변경됩니다. 왼쪽 사이드 바에서 딥 링크하기 위해 각 헤더 요소에서 ID 속성을 가져 와서 배열에 넣기로했습니다. 이 같은 :

jQuery(document).ready(function($) { 

    var navLi = $('.resources-nav li a'); 
    var aHeader = $('#accordion h1'); 

    var n = []; // Sidebar nav items 
    var a = []; // Accordion items 

    //Get Nav items and store in an array 
    $(navLi).each(function() { 
    n.push($(this)); 
    }); 

    //Get Accordion header items and store in array 
    $(aHeader).each(function() { 
    var id = $(this).attr('id'); 
    a.push(id); 
    }); 

    // Add id from each Accordion header to href="#" of each nav link. 
    // This will create deep linking possibilities, right? Well... 
    $.each(a, function(i, val) { 
    console.log(i + ": " + val); //Just for me to see that it's working 
    $(navLi).attr('href', '#'+val); 
    }); 

}); 

당신이 희망이 볼 수 있듯이, 나는 사이드 바에서 각 링크에 a 배열의 각 개별 ID를 매핑하는 데 노력하고있어. 하지만, 내 결과는 단지 다음과 같이 각 href="#"에 배열의 마지막 ID를 추가하는 것을 끝 : 왜이 ​​작동하지

<li> 
    <a href="#ui-id-33">Title of Post</a> 
    </li> 
    <li> 
    <a href="#ui-id-33">Title of Post</a> 
    </li> 

어떤 아이디어?

Answer 1

요소를 저장하기 위해 추가 배열을 만들 필요가 없으며, $(selector)으로 요소 집합을 만들 때마다 jQuery가 이미이 작업을 수행합니다.

주된 문제는 each입니다. each의 각 루프에서 navLi의 전체 모음에 대해 attr을 설정하면 마지막 단계의 마지막 값만 적용됩니다. 또한 사용자가 만든 배열 n을 사용하지 마십시오.

eq() 메서드를 사용하여 올바른 인덱스 navLi 요소를 대상으로 수정할 수 있습니다.

$.each(a, function(i, val) { 
    console.log(i + ": " + val); //Just for me to see that it's working 
    navLi.eq(i).attr('href', '#'+val); /* no need to wrap navLi in $() again */ 
    }); 

1:1 사이드와 아코디언의 관계는 아래로 전체 코드를 단순화 할 수가 있다고 가정하면

jQuery(document).ready(function ($) { 
    var aHeader = $('#accordion h1'); 
    $('.resources-nav li a').attr('href', function (index, elem) { 
     return '#' + aHeader[index].id; 
    }); 
});