Question

我有一些像这样的HTML：

<ul id = "postsList">
  <li ng-repeat="post in posts">
    <button class = "deleteButt" ng-click="delButt()">Remove</button>

   <!--hidden div I want to show/hide when the above button is pressed--> 
    <div class = "confirmDeleteBox">
    <button class = "confirmDelete" ng-click = "postDelete(post._id)">Confirm</button>
    </div>

  </li>
</ul>

因此，每个帖子都有$('.deleteButt')您点击它，它应该显示$('div.confirmDeleteBox')，包括它的子元素，但仅适用于该特定帖子。

那么我如何使用jquery来显示特定li的隐藏子元素？或者通过他们的班级或身份证明特定的孩子？我不确定最好的方法是什么。

Answer 1

混合jquery和angularjs（特别是在控制器中）会导致很多痛苦。这可以通过角度轻松完成。 ngRepeat创建一个允许其工作的子范围。

<ul id="postsList">
    <li ng-repeat="post in posts">
        <button class="deleteButt" ng-click="showConfirm = !showConfirm" ng-hide="showConfirm">Remove</button>
        <div ng-show="showConfirm">
            <button class="confirmDelete" ng-click="postDelete(post._id)">Confirm</button>
        </div>
    </li>
</ul>

Answer 2

您想要使用jQuery的siblings()函数。

$('.deleteButt').on("click", function (e) {
    $(this).siblings(".confirmDeleteBox").show();
});

此处有关此功能的更多详细信息：https://api.jquery.com/siblings/

jquery hide / show特定的li子元素

2 个答案: