Question

我在点击时使用JQuery扩展h1标签。我目前将标题设置为＆gt;标题文本。现在，如果标题已展开，我想将文本更改为▼标题文本。

如何更改＆gt;中的文字？标题文本▼点击事件上的标题文本？

    $(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更改内容。

Stack Snippet

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

所以我添加了glyphicon集，使用span显示箭头并在向下和向右之间切换其类。除了保存引用外，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>

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

2 个答案: