在jQuery中使用子级访问子级

Question

我有两个跨度，单击一个跨度标签后，应该显示p标签。 这是我的HTML文件：

<span class="span1" ng-click="show()">Span_1
<p class="p1" ng-show="var1">P_1</p>
</span>
<span class="span1" ng-click="show()">Span_2
<p class="p2" ng-show="var1">P_2</p>
</span>

相应的jQuery是

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.var1 = false;
    $("span").click(function(){
        $(this).children().toggle();
    })
});

Angularjs中也有任何children（）标签吗？ 柱塞为http://plnkr.co/edit/UnyqbY6lLRqhAb8183Nf?p=preview

Answer 1

请看看矮人

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<span class="span1">Span_1
<p class="p1"  style="display:none;">P_1</p></span><br>
<span class="span1" >Span_2
<p class="p2" style="display:none;">P_2</p></span>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $("span").click(function(){
      console.log($(this).children())
      $(this).children().first().toggle();
    })
});
</script>

</body>
</html>

Answer 2

为什么不在这里使用纯Angular而不是jQuery。 我不确定您要达到的目标是100％，但是我想您想在单击特定范围时切换p元素。 如果是这样，您可以使用以下代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showChildren1 = false;    // show children of first span
    $scope.showChildren2 = false;    // show children of second span
    $scope.toggle1 = function(){
      $scope.showChildren1 = !$scope.showChildren1;  // toggle visibility
    }
    $scope.toggle2 = function(){
      $scope.showChildren2 = !$scope.showChildren2;   // toggle visibility
    }
});

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
    <span class="span1" ng-click="toggle1()">Span_1</span><br>
    <p class="p1" ng-show="showChildren1">P_1</p>
    <span class="span1" ng-click="toggle2()">Span_2</span>
    <p class="p2" ng-show="showChildren2">P_2</p>
</div>

这是更新的示例

在jQuery中使用子级访问子级

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-10-10 11:15:44

解决方案2
1 2015-10-10 08:06:15

在jQuery中使用子级访问子级

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-10-10 11:15:44

解决方案2 1 2015-10-10 08:06:15

解决方案1
2 已采纳 2015-10-10 11:15:44

解决方案2
1 2015-10-10 08:06:15