Setzen Sie den Titel von Accordion in Semantic.JS

Question

Ich verwende Semantic UI JS für die Implementierung verschiedener UI-Funktionen. Hier ist der Link für die Semantic UI. Ich muss den Wert des Titels dynamisch festlegen. Hier im folgenden Beispiel "Titel 1". Suchen Sie nach einer Möglichkeit, JQuery zu verwenden.

<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

Ich würde den Titeltext in einem span Elemente wickeln, so dass ich es Ziel könnte und den Text mit der Methode jQuery .text() ändern.

$(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') 
 
    }); 
 
});

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

<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>