如何在单击按钮时显示不同的标题
[英]how to show the different titles on button click
问题描述
I want to show the button group name, that means the different titles(section-1, section-2) when I click on buttons. 
我想显示按钮组名称，即单击按钮时的标题（第1节，第2节）不同。 Right now it's showing the same title. 现在，它显示相同的标题。 See the 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>
3 个解决方案
解决方案1
0 2017-12-12 09:35:52
So you're looking for something like this? 所以您正在寻找这样的东西？
$(".my-btn").click(function(){
$(".work-area-header").replaceWith($(this).closest("ul").find(".section > h2").html());
});
解决方案2
0
Add class to button as per section like:
按照每个部分将类添加到按钮： <button class="my-btn Section-3" style="width:100%">Button-10</button>`make changes in JavaScript function:
在JavaScript函数中进行更改： $(function(){ var sectionName=$(".section").text(); $(".my-btn").click(function(){ section = $(this).attr("class").split(" ")[1]; alert(section); $(".work-area-header").text(section); }); });
解决方案3
0 2017-12-12 10:06:30
When you do: $(".section").text() . 当您这样做时： $(".section").text() 。 It's going to get all the element with that class name, and text will return the text value of the first element. 它将获得具有该类名称的所有元素，并且text将返回第一个元素的text值。
In order to get the right text, you need to find the proper element relative to the button you clicked. 为了获得正确的文本，您需要找到与单击的按钮相关的适当元素。 For this, you can use the parent method and then search in the children of the parent for an element with the class name .section . 为此，可以使用parent方法，然后在父级的子级中搜索类名称为.section的元素。
$(function(){
$(".my-btn").click(function(){
var sectionName = $(this).parent().find(".section").text();
$(".work-area .work-area-header").html(sectionName);
});
});
Also, do not use replaceWith in this case as it will effectively replace one element by the other. 另外，在这种情况下，请勿使用replaceWith ，因为它将有效地将一个元素替换为另一个元素。 As a result, the element you found while cliking button X will be gone the next time you click on button X. 结果，在您单击按钮X时找到的元素将在下次单击按钮X时消失。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.