使用jqLite隐藏和显示html元素

Using jqLite to hide and show html elements

本文关键字：html 元素 显示 jqLite 隐藏 使用      更新时间：2023-09-26

就像任何使用AngularJS创建web应用程序的普通人一样，我最初尝试使用ng-hide/ng-show在某些条件下使某些元素可见。出于某种原因，这不想起作用，而且代码太复杂，我无法在这里重新叙述。我认为使用jQuery会很容易（或者至少与Angular内置的jQuery一样多）。这就是我目前所拥有的：

angular.element(document.querySelector([ELEMENT ID])).off();

上面的行是为了隐藏，但我再也找不回来了。如果你想知道的话，我会尝试隐藏按钮，以进行其他无关的操作。对上面的代码使用".on（）"是不起作用的。这一行需要如何书写才能使元素消失？更重要的是，我该如何让它重现？

ng-show和ng-hide使用布尔值。不要在控制器内部使用jQuery。如果您需要使用它，请为此目的创建指令。

在控制器的作用域中创建标志变量。设置为true或false

现在，如果接收到布尔值为true，ng-show将显示该元素，而如果接收到false，则隐藏该元素。

反之亦然，对于ng-hide，如果接收到true，则隐藏；如果接收到false，则显示。

所以，在其中任何一个之间做出决定，不要两者都用。所以考虑到标志名称是活动的，并且它被设置为true，并且您希望在开头显示按钮。代码可以是：

angular.module('demo', []).controller('DemoCtrl', function($scope){
  $scope.active = true;
});

模板将看起来像：

<div ng-app="demo">
  <div ng-controller="DemoCtrl">
    <button type="button" ng-click="active = false" ng-show="active">Hide Me</button>
    <button type="button" ng-click="active = true" ng-hide="active">Reset</button>
  </div>
</div>

为此我们需要一个小css：

.display-hide {
   display: none;
}

假设我们在页面上显示了一个验证摘要；

<div class="alert alert-danger display-hide">
        <button class="close" data-close="alert"></button>
        <span>
            @Html.ValidationSummary(false)
        </span>
</div>

并且使用jQuery；

jQuery(document).ready(function () {
   @if(!ViewData.ModelState.IsValid) {
       <text>
  $('.alert span').parent().removeClass("display-hide");
       </text>
   }
   else
   {
       <text>
  $('.alert span').parent().addClass("display-hide");
       </text>
   }
});

你可以对任何html元素使用这个技巧。

on和off方法不用于显示/隐藏元素，而是用于添加和删除事件侦听器。我认为你们的元素已经被隐藏了，这让你们相信off隐藏了元素。

如果您真的不能使用ng-hide/ng-show，我建议您使用addClass和removeClass（而不是off和on）来向元素添加/删除"隐藏"类。该类可以将元素display设置为none。

但是，我鼓励您显示角度代码，以便我们可以使用ng-show帮助您解决此问题。

相关文章：