嗨，我正在制作一个包含链接的UI，如果单击它们，它们应该使用toggle弹出另一个数据，但是我是从ng-repeat中获取此数据的，所以如果我单击一个，则显示所有数据，请告诉他们如何调用切换方法，因此在每个链接上仅单击应弹出的特定数据。
我的html代码是
<!doctype html>
<html ng-app="myApp">
<head>
<title>UI</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="angular.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body style="background-color:#F2F2F2" ng-controller="maincontroller">
<div class="first">
<div class="container">
<table>
<tr>
</tr>
</table>
<table>
<tbody>
<tr>
<div class="get">
<h4>Station</h4>
<p>HKG</p><h4>Airline Operator</h4>
<p>Y7</p><h4>Aircraft Model</h4>
<p>A300-600F</p><h4>Configuration Class</h4>
<p>Cargo</p><h4>Service Type</h4>
<p>Transit</p>
</div>
<th id="cool"><img src="pic4.png" height="30px" width="30px" padding-top="30px">TTS142</th>
<td ng-repeat="do in info" ng-style="{'backgroundColor':do.color1,'width':do.number}" class="fool">
<a href="#" class="link">{{do.name}}</a>
<div class="tooltip">{{do.tooltip}}</div>
</td>
<th id="cool"><img src="pic3.png" height="30px" width="30px" padding-top="30px">TTS142</th>
</tr>
</tbody>
</table>
<table>
<tr>
<div class="get">
<h4>Station</h4>
<p>HKG</p><h4>Airline Operator</h4>
<p>Y7</p><h4>Aircraft Model</h4>
<p>A300-600F</p><h4>Configuration Class</h4>
<p>Cargo</p><h4>Service Type</h4>
<p>Transit</p>
</div>
<th id="cool"><img src="pic4.png" height="30px" width="30px" padding-top="50px">TTS143</th>
<td ng-repeat="do in info1" ng-style="{'backgroundColor':do.color1,'width':do.number}">
<a href="#" class="link">{{do.name}}</a>
<div class="tooltip"></div>
</td>
<th id="cool"><img src="pic3.png" height="30px" width="30px" padding-top="50px">TTS143</th>
</tr>
</table>
<table>
<tr>
<div class="get">
<h4>Station</h4>
<p>HKG</p><h4>Airline Operator</h4>
<p>Y7</p><h4>Aircraft Model</h4>
<p>A300-600F</p><h4>Configuration Class</h4>
<p>Cargo</p><h4>Service Type</h4>
<p>Transit</p>
</div>
<th id="cool"><img src="pic4.png" height="30px" width="30px" padding-top="50px">TTS163</th>
<td ng-repeat="do in info2" ng-style="{'backgroundColor':do.color1,'width':do.number}">
<a href="#" class="link">{{do.name}}</a>
<div class="tooltip">this file is on schedule</div>
</td>
<th id="cool"><img src="pic3.png" height="30px" width="30px" padding-top="50px">TTS163</th>
</tr>
</table>
<table>
<tr>
<div class="get">
<h4>Station</h4>
<p>HKG</p><h4>Airline Operator</h4>
<p>Y7</p><h4>Aircraft Model</h4>
<p>A300-600F</p><h4>Configuration Class</h4>
<p>Cargo</p><h4>Service Type</h4>
<p>Transit</p>
</div>
<th id="cool"><img src="pic4.png" height="30px" width="30px" padding-top="50px">TTS182</th>
<td ng-repeat="do in info3" ng-style="{'backgroundColor':do.color1,'width':do.number}">
<a href="#" class="link">{{do.name}}</a>
<div class="tooltip">this file is on schedule</div>
</td>
<th id="cool"><img src="pic3.png" height="30px" width="30px" padding-top="50px">TTS182</th>
</tr>
</table>
<div>
<ul class="legend">
<li><span class="arrival"></span>Arrival</li>
<li><span class="Groundhandling"></span>Ground handling</li>
<li><span class="Departure"></span> Departure</li>
</ul>
<div>
<a href="#" class="link1">legend codes</a>
<div class="tooltip1">
<table>
<tr>AOB - Aircraft on block</tr>
<br>
<tr>CC - Cabin cleaning</tr>
<br>
<tr>MB - Maintenance Block</tr>
<br>
<tr>TS - Toilet Servicing</tr>
<br>
<tr>WS - Water Servicing</tr>
<br>
<tr>R - Refulleing</tr>
<br>
<tr>PB - Push back</tr>
<br>
<tr>LT - Long Towing-Arrival to Parking</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="second">
<div class="container">
<table style="width:100%">
<tr>
<div class="get">
<h4>Station</h4>
<p>HKG</p><h4>Airline Operator</h4>
<p>Y7</p><h4>Aircraft Model</h4>
<p>A300-600F</p><h4>Configuration Class</h4>
<p>Cargo</p><h4>Service Type</h4>
<p>Transit</p>
</div>
<th id="cool"><img src="pic4.png" height="50px" width="50px" padding-top="50px">TTS185</th>
<td ng-repeat="do in info1" ng-style="{'backgroundColor':do.color1,'width':do.number}">
<a href="#" class="link">{{do.name}}</a>
<div class="tooltip">this file is on schedule</div>
</td>
<th id="cool"><img src="pic3.png" height="50px" width="50px" padding-top="50px">TTS185</th>
</tr>
</table>
<div>
<ul class="legend">
<li><span class="arrival"></span>Arrival</li>
<li><span class="Groundhandling"></span>Ground handling</li>
<li><span class="Departure"></span> Departure</li>
</ul>
<div>
<a href="#" class="link1">legend codes</a>
<div class="tooltip1">
<table>
<tr>AOB - Aircraft on block</tr>
<br>
<tr>CC - Cabin cleaning</tr>
<br>
<tr>MB - Maintenance Block</tr>
<br>
<tr>TS - Toilet Servicing</tr>
<br>
<tr>WS - Water Servicing</tr>
<br>
<tr>R - Refulleing</tr>
<br>
<tr>PB - Push back</tr>
<br>
<tr>LT - Long Towing-Arrival to Parking</tr>
</table>
</div>
</div>
</div>
</div>
<div id="click1">
<a href="#"><img src="pic7.png" width="30px" height="25px"></a>
</div>
</div>
<div id="click"><a href="#"><img src="pic6.png" width="30px" height="25px"></a></div>
</div>
</body>
</html>这是我的角度代码
var App = angular.module("myApp", []);
App.controller("maincontroller", function ($scope) {
$scope.info = [
{
name: 'aob',
number: '10%',
color1: '#FF3300',
tooltip: 'sbsjasjahsj'
},
{
name: 'cc',
number: '20%',
color1: '#FF3300',
tooltip: 'sbsjasjahsj'
},
{
name: 'mb',
number: '5%',
color1: '#00FFFF',
tooltip: 'sbsjasjahsj'
},
{
name: 'ts',
number: '20%',
color1: '#00FFFF',
tooltip: 'sbsjasjahsj'
},
{
name: 'ws',
number: '8%',
color1: '#00FFFF',
tooltip: 'sbsjasjahsj'
},
{
name: 't',
number: '2%',
color1: '#00FFFF',
tooltip: 'sbsjasjahsj'
},
{
name: 'aob',
number: '15%',
color1: '#66FF66',
tooltip: 'sbsjasjahsj'
},
{
name: 'pb',
number: '2%',
color1: '#66FF66',
tooltip: 'sbsjasjahsj'
}
];
$scope.info1 = [
{
name: 'aob',
number: '10%',
color1: '#FF3300'
},
{
name: 'cc',
number: '20%',
color1: '#FF3300'
},
{
name: 'mb',
number: '5%',
color1: '#00FFFF'
},
{
name: 'ts',
number: '20%',
color1: '#00FFFF'
},
{
name: 'ws',
number: '8%',
color1: '#00FFFF'
},
{
name: 't',
number: '2%',
color1: '#00FFFF'
},
{
name: 'aob',
number: '15%',
color1: '#66FF66'
},
{
name: 'pb',
number: '2%',
color1: '#66FF66'
},
{
name: 'ws',
number: '8%',
color1: '#66FF66'
}
];
$scope.info2 = [
{
name: 'aob',
number: '10%',
color1: '#FF3300'
},
{
name: 'ws',
number: '8%',
color1: '#ff3300'
},
{
name: 'cc',
number: '20%',
color1: '#FF3300'
},
{
name: 'mb',
number: '5%',
color1: '#00FFFF'
},
{
name: 'ts',
number: '20%',
color1: '#00FFFF'
},
{
name: 'ws',
number: '8%',
color1: '#00FFFF'
},
{
name: 't',
number: '2%',
color1: '#00FFFF'
},
{
name: 'aob',
number: '15%',
color1: '#66FF66'
},
{
name: 'pb',
number: '2%',
color1: '#66FF66'
},
{
name: 'ws',
number: '8%',
color1: '#66FF66'
}
];
$scope.info3 = [
{
name: 'aob',
number: '10%',
color1: '#FF3300'
},
{
name: 'cc',
number: '20%',
color1: '#FF3300'
},
{
name: 'mb',
number: '5%',
color1: '#ff3300'
},
{
name: 'ws',
number: '8%',
color1: '#00FFFF'
},
{
name: 'ts',
number: '20%',
color1: '#00FFFF'
},
{
name: 'ws',
number: '8%',
color1: '#00FFFF'
},
{
name: 't',
number: '2%',
color1: '#00FFFF'
},
{
name: 'aob',
number: '15%',
color1: '#66FF66'
},
{
name: 'pb',
number: '2%',
color1: '#66FF66'
},
{
name: 'ws',
number: '8%',
color1: '#66FF66'
}
]
});和我的jQuery代码
$(document).ready(function(){
$('#click').click(function(){
$('.first').hide();
$('.second').show();
});
$('#click1').click(function(){
$('.first').show();
$('.second').hide();
});
$('.link1').click(function(){
$(".tooltip1").toggle("slow");
});
$('.link').click(function(){
$(".tooltip").toggle("slow");
});
});最后是我的CSS
.second {
display: none;
}
#click {
display: block;
position: absolute;
bottom: 0;
right: 0;
}
#click1 {
display: block;
position: absolute;
bottom: 0;
left: 0;
}
#good {
height: 20px;
width: 20px;
display: inline;
padding-top: 100px;
}
body {
/**/
}
h4 {
display: inline;
}
p {
display: inline;
}
#cool {
font-size: 10px;
width: 50px;
padding-top: 20px;
}
table {
padding-top: 20px;
table-layout: fixed;
width: 1000px;
height: 75px;
}
#hello {
table-layout: fixed;
width: 200px;
height: 50px;
}
#hello td {
width: 50px;
}
td {
padding-top: 25px;
border: 1px solid black;
overflow: hidden;
}
.process {
display: none;
}
.tooltip {
width: 400px;
height: 200px;
padding: 30px;
padding-left: 20px;
background-color: #F2F2F2;
border: 1px solid #ccc;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
border-radius: 3px;
-webkit-border-radius: 3px;
position: absolute;
display: none;
overflow: hidden;
}
.tooltip1 {
width: 600px;
height: 200px;
padding: 30px;
top: 0px;
background-color: #D3D3D3;
border: 1px solid #ccc;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
border-radius: 3px;
-webkit-border-radius: 3px;
position: absolute;
top:;
left:;
display: none;
overflow: hidden;
}
.tooltip1 {
z-index: 100;
}
.tooltip {
z-index: 100;
}
.link {
display: block;
width: auto;
position: relative;
}
.link1 {
display: block;
width: auto;
position: center;
}
#jog {
left: 0px;
top: 0px;
width: 400px;
height: 200px;
}
.get {
padding-left: 40px;
}
.get h4 {
font-size: 12px;
padding-left: 50px;
}
.get p {
font-size: 13px;
padding-left: 10px;
}
/* basic positioning */
.legend {
list-style: none;
padding-left: 150px;
}
.legend li {
float: left;
margin-right: 150px;
}
.legend span {
border: 1px solid #ccc;
float: left;
width: 12px;
height: 12px;
margin: 2px;
}
/* your colors */
.legend .arrival {
background-color: #FF3300;
}
.legend .Groundhandling {
background-color: #00FFFF;
}
.legend .Departure {
background-color: #66FF66;
}最佳答案
当您正在处理class时；您将遇到上述问题，因为所有链接和div都具有link1，link，tooltip1和tooltip等类。
为了避免它；您必须按如下所示定位关联的tooltip div：
通过查看您的HTML，我得出了以下代码：
$('.link1').click(function(){
$(this).closest("div").find(".tooltip1").toggle("slow");
});
$('.link').click(function(){
$(this).closest("td").find(".tooltip").toggle("slow");
});
关于javascript - 通过从范围的ng-repeat获取动态ID使用切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33229654/