3

我想使用 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

4

1 回答 1

3

我能想到的最佳解决方案是主动在您的 H3 文本周围添加一个跨度，这样一旦手风琴将其图像图标添加到它旁边，您仍然可以轻松地直接定位它。如果 UI 小部件为您这样做，那就太好了。

关键 HTML：

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

关键javascript：

$("#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-01T21:35:31.977 回答