Question

我想显示按钮组名称，这意味着当我点击按钮时不同的标题（第1节，第2节）。现在它显示相同的标题。请参阅screenshot of my web page。

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="col-md-3" style="background:#e5eb8e; ">

        <ul style="list-style:none;">
            <li ><h2>Section-1</h2></li>
            <li ><button class="my-btn" style="width:100%">Button-1</button></li><br>
            <li ><button class="my-btn" style="width:100%">Button-2</button></li><br>
            <li ><button class="my-btn" style="width:100%">Button-3</button></li><br>
            <li ><button class="my-btn" style="width:100%">Button-4</button></li><br>
        </ul>

        <ul style="list-style:none;">
             <li class="section"><h2>Section-2</h2></li>
            <li ><button class="my-btn" style="width:100%">Button-5</button></li><br>
            <li ><button class="my-btn" style="width:100%">Button-6</button></li><br>
            <li ><button class="my-btn" style="width:100%">Button-7</button></li><br>
        </ul>

        <ul style="list-style:none;">
             <li class="section"><h2>Section-3</h2></li>
            <li ><button class="my-btn" style="width:100%">Button-8</button></li><br>
            <li ><button class="my-btn" class="my-btn" style="width:100%">Button-9</button></li><br>
            <li ><button class="my-btn" style="width:100%">Button-10</button></li><br>
        </ul>
    </div>
    <div class="col-md-9" style="background: #c2c2f7 ;height: 800px;">

    <div class="workarea">

        <div class="work-area-header"></div>
    </div>

    </div>

    <script type="text/javascript">

        $(function(){
            var sectionName=$(".section").text();
            $(".my-btn").click(function(){

              $(".work-area-header").replaceWith("sectionName");

            });
        });

    </script>
    </body>
    </html>

Answer 1

所以你正在寻找这样的东西吗？

$(".my-btn").click(function(){
  $(".work-area-header").replaceWith($(this).closest("ul").find(".section > h2").html());
});

Answer 2

按照以下部分将按钮添加到按钮：

 $(function(){
    var sectionName=$(".section").text();
    $(".my-btn").click(function(){
        section = $(this).attr("class").split(" ")[1];
        alert(section);
        $(".work-area-header").text(section);
    });
 });

在JavaScript函数中进行更改：
```
new ...
```
codepen link

Answer 3

当你这样做时：$(".section").text()。它将获得具有该类名的所有元素，并且文本将返回第一个元素的text值。

为了获得正确的文本，您需要找到相对于您单击的按钮的正确元素。为此，您可以使用parent方法，然后在父级的子级中搜索类名为.section的元素。

$(function(){
  $(".my-btn").click(function(){
    var sectionName = $(this).parent().find(".section").text();
    $(".work-area .work-area-header").html(sectionName);
  });
});

此外，在这种情况下不要使用replaceWith，因为它会有效地将一个元素替换为另一个元素。因此，下次单击按钮X时，您在按下按钮X时找到的元素将会消失。

如何在按钮点击时显示不同的标题

3 个答案: