jQueryUI 아코디언 헤더 텍스트 변경

jQueryUI 아코디언을 사용하여 헤더 텍스트를 변경하고 싶습니다. 나는 그것을 작동 시키지만, 코드는 정말 지저분하다. 나는 다음과 같이한다. 최대화/최소화 아이콘을 표시하는 데 사용되는 범위를 유지하기 때문에이 방법을 사용합니다. 여기서 첫 번째 색인 된 헤더 텍스트를 변경합니다.jQueryUI 아코디언 헤더 텍스트 변경

var html = $('#selector-header-0').html().split('>'); 
var span = ''; 
for (var i = 0; i < html.length - 1; ++i) 
    span += html[i] + '>'; 
$('#selector-header-0').empty(); 
$('#selector-header-0').append(span + 'New Header');

내가 뭘하고 싶은지 알고 싶습니다.

$(#selector 0).header = 'New Header';

아코디언에는 헤더 옵션이 있지만 헤더 크기를 변경하는 데 사용되는 것 같습니다. http://api.jqueryui.com/accordion/#option-header

출처

2013-08-01 Dehli

내가 생각할 수있는 최선의 해결책은 H3 텍스트 주변에 사전에 스팬을 추가하여 accordion이 이미지 아이콘을 추가하면 바로 쉽게 타겟팅 할 수 있다는 것입니다. UI 위젯이이 작업을 수행하면 좋을 것입니다. 당신.

키 HTML :

<h3><span class="accordion-header">Section 1</span></h3>

주요 자바 스크립트 :

$("#accordion").find($("#accordion").accordion("option", "header")) 
.eq(0) //which do you wish to target? 
.find($("span.accordion-header")).text("Section " + Math.random());

세미 일 (스타일에는 적용되지 않음) JSFiddle을 : http://jsfiddle.net/8KANL/

전체 작업 예 :

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>accordion demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 
<input id="renamefirst" type="button" value="Rename First Accordion Header" min=0></input> 
<input id="renamesecond" type="button" value="Rename Second Accordion Header" min=1></input> 
<input id="renamelast" type="button" value="Rename Last Accordion Header" min=2></input> 

<div id="accordion"> 
    <h3><span class="accordion-header">Section 1</span></h3> 
    <div> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. 
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, 
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. 
    Nam mi. Proin viverra leo ut odio.</p> 
    </div> 
    <h3><span class="accordion-header">Section 2</span></h3> 
    <div> 
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. 
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, 
    faucibus interdum tellus libero ac justo.</p> 
    </div> 
    <h3><span class="accordion-header">Section 3</span></h3> 
    <div> 
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. 
    Quisque lobortis.Phasellus pellentesque purus in massa.</p> 
    <ul> 
     <li>List item one</li> 
     <li>List item two</li> 
     <li>List item three</li> 
    </ul> 
    </div> 
</div> 

<script> 
$("#accordion").accordion(); 

$("input").click(function() { 
    $("#accordion").find($("#accordion").accordion("option", "header")).eq(this.min).find($("span.accordion-header")).text("Section " + Math.random()); 
}); 

</script> 

</body></html>

을

출처

2013-08-01 21:35:31

감사합니다. 노력하고있어 ... 나는 이것과 비슷한 것을 시도했지만 그 결과 스팬이 제거되었다 (아이콘을 저장함). – Dehli

좋아, 범위에 텍스트를 배치하는 것에 의존하는 빛나는 새로운 대답을 제공했습니다. –

고마워요! UI 위젯에 캡슐화해야한다는 것에 동의합니다. – Dehli

jQueryUI 아코디언 헤더 텍스트 변경

답변

관련 문제