在Semantic.JS中设置Accordion的标题

Question

我正在使用Semantic UI JS来实现各种UI功能。以下是Semantic UI的链接。我需要动态设置Title的值。在下面的示例“标题1”中。寻找使用JQuery的方法。

<div class="ui styled accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    Title 1
  </div>
  <div class="content">
    <p class="transition hidden">Content of the title</p>
  </div>
</div>  

Answer 1

我会将标题文本包装在span元素中，以便我可以使用jQuery .text()方法来定位它并更改文本。

＆＃13;

＆＃13;

$(function() {
  // initialize accordion
  $('.ui.accordion')
    .accordion({
      selector: {
        trigger: '.title'
      }
    })

  // change title on button click
  $('button').on('click', function() {
    $('.title span').text('The new title to use')
  });
});

＆＃13;

@import url('https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>

<div class="ui styled accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    <span>Title 1</span>
  </div>
  <div class="content">
    <p class="transition hidden">Content of the title</p>
  </div>
</div>

<button>Change the title</button>

＆＃13;

＆＃13;

＆＃13;