如何更改H1标签中的文本？

Question

单击时，我正在使用JQuery扩展h1标签。 我目前将标题设置为> Header Text。 现在，如果标题已展开，我想将文本更改为▼标题文本。

如何在单击事件中将文本从>标题文本更改为▼标题文本？

    $(function () {
    $('.grid-container').hide();
    $(".grid-panel").click(function (e) {
        if ($(e.target).closest('div').hasClass('grid-panel')) {
            $(this).find('.grid-container').toggle();
        }
    });

    <div class='grid-panel'>
    <h1 id="h1sprc" runat="server">&gt; First Data To Show</h1>
    <div class='grid-container'>
        <telerik:RadGrid> </telerik>
    </div>
</div>

Answer 1

使用toggle() jQuery进行隐藏和显示。

为了更改文本，您必须放置一些条件进行比较，然后使用html() jQuery更改内容。

堆栈片段

 $(function() { $('.grid-container').hide(); $(".grid-panel").click(function(e) { $(this).next('.grid-container').toggle(); if ($(this).find('span').html() == ">") $(this).find('span').html("∨") else $(this).find('span').html(">"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='grid-panel'> <h1 id="h1sprc" runat="server"><span>&gt;</span> First Data To Show</h1> </div> <div class='grid-container'> Grid Container </div> 

Answer 2

因此，我添加了glyphicon集，使用跨度显示箭头并在上下左右切换其类。 除了保存引用之外， triggerEl.children("span")....行是我唯一更改的行。 当然，我确实包含了对glyphicon CSS的引用。

 $(function() { $('.grid-container').hide(); $(".grid-panel").click(function(e) { let triggerEl = $(e.target), arrowSpan = triggerEl.children(".arrow-bit"); if (triggerEl.closest('div').hasClass('grid-panel')) { // Find the arrow span, and toggle the // arrow between down and right. // this is the only line I really changed. triggerEl.children("span").toggleClass("glyphicon-arrow-right").toggleClass("glyphicon-arrow-down"); $(this).find('.grid-container').toggle(); } }); }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='grid-panel'> <h1 id="h1sprc" runat="server"><span class='glyphicon glyphicon-arrow-right'></span> First Data To Show</h1> <div class='grid-container'> <p>Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada. Cras ultricies ligula sed magna dictum porta.</p> <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta.</p> </div> </div>