我试图从bootstrap中获取几个轮播的索引。此时我只得到一个旋转木马的索引。
这是代码。
<body ng-app="menuAPP" ng-controller="mainController">
<!-- ------------------------------------------------------ -->
<!-- SLIDER DE BASES DE BRAZOS ROBOTICOS -->
<div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
<!-- Con class="carousel" no sale error pero no funciona-->
<div id="Carousel-roboticArmB" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#Carousel-roboticArmB" data-slide-to="0" class="active"></li>
<%
for(int i=1;i<=bases.size();i++)
{
%><li data-target="#Carousel-roboticArmB data-slide-to="<%out.println(i); %>" class></li><%
}
%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
boolean activo=true;
for(Pieza i: bases)
{
String url = i.getImg();
if(activo)
{
activo=false;
%>
<div class="item active" id="base">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
else
{
%>
<div class="item" id="base">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
}
%>
</div>
<!-- Controls -->
<a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmB" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmB" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
<input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
</div>
</div>
<hr>
<!-- ------------------------------------------------------ -->
<!-- SLIDER DE ANTEBRAZOS ROBOTICOS -->
<div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
<!-- Con class="carousel" no sale error pero no funciona-->
<div id="Carousel-roboticArmA" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#Carousel-roboticArmA" data-slide-to="0" class="active"></li>
<%
for(int i=1;i<=antebrazos.size();i++)
{
%><li data-target="#Carousel-roboticArmA data-slide-to="<%out.println(i); %>" class></li><%
}
%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
activo=true;
for(Pieza i: antebrazos)
{
String url = i.getImg();
if(activo)
{
activo=false;
%>
<div class="item active" id="ante">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
else
{
%>
<div class="item" id="ante">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
}
%>
</div>
<!-- Controls -->
<a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmA" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmA" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
<input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
</div>
</div>
<hr>
<!-- ------------------------------------------------------ -->
<!-- SLIDER DE MANOS ROBOTICOS -->
<div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
<!-- Con class="carousel" no sale error pero no funciona-->
<div id="Carousel-roboticArmM" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#Carousel-roboticArmM" data-slide-to="0" class="active"></li>
<%
for(int i=1;i<=manos.size();i++)
{
%><li data-target="#Carousel-roboticArmM data-slide-to="<%out.println(i); %>" class></li><%
}
%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
activo=true;
for(Pieza i: manos)
{
String url = i.getImg();
if(activo)
{
activo=false;
%>
<div class="item active" id="mano">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
else
{
%>
<div class="item" id="mano">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
}
%>
</div>
<hr>
<!-- Controls -->
<a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmM" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmM" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
<input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
</div>
</div>
<!-- ------------------------------------------------------ -->
<form id="formShowBrazo" method="post" action="redirect" >
<input type="button" value="Probar brazo seleccionado" ng-click="show()" class="btn btn-primary"/>
</form>
<script>
var app = angular.module('menuAPP', ['ui.bootstrap']);
app.controller('mainController', function($scope, $http, $window, $location) {
$scope.hideError=true;
$scope.show = function() {
$scope.currentBaseIndex = $("#brazo, div.active").index() + 1;//Saca el indice actual del carousel
$scope.currentAnteIndex = $("#antebrazo, div.active").index() + 1;//Saca el indice actual del carousel
$scope.currentManoIndex = $("#mano, div.active").index() + 1;//Saca el indice actual del carousel
var params = "Data :"+$scope.currentBaseIndex+":"+$scope.currentAnteIndex+":"+$scope.currentManoIndex;
var data = angular.toJson(params)
$http({
method: 'POST',
url: 'showPieza',
data: 'Data=' + data,
headers : {
'Content-Type' : 'application/x-www-form-urlencoded'
}
}).success(function(response)
{
post("formShowBrazo");
});
};
function isActive(slide) {
return slide.active;
};
});
</script>
</body>
这里需要一个索引为所有轮播的字符串
var params = "Data :"+$scope.currentBaseIndex+":"+$scope.currentAnteIndex+":"+$scope.currentManoIndex;
问题是所有值都是第一个轮播的索引（id =“Carousel-roboticArmB”）
示例
1º轮播指数：2
2º轮播指数：4
3º轮播指数：1
预期输出：“数据：4：2：1”
实际输出：“数据：2：2：2”
答案 0 :(得分：0)
<强>解决
$("#rectangle").hide();
$("#toggle-rec").click(function () {
$("#rectangle").toggle(2000);
if($("#rectangle").is(":visible"))
{
$("#wrapper").removeClass("body-left-padding");
}
else
{
$("#wrapper").addClass("body-left-padding");
}
});解决方案是改变ID和类的位置。
希望有人会觉得这很有帮助。