如果頁面上加載了某個 DIV，則使用 JavaScript 更改元素的顯示設置

Question

我對此很陌生，我在輸入代碼的方式上遇到了挑戰。

目前在我的頁面上有以下按鈕：

<a ng-if="vm.cart.canRequestQuote" href="/Rfq" class="btn primary btn-request-quote tst_cartPage_submitQuote" ng-bind="vm.cart.isSalesperson ? 'Create a Quote' : 'Request a Quote'" ng-disabled="vm.cart.isAwaitingApproval">Request a Quote</a>

我試圖根據頁面上是否加載以下內容來隱藏/顯示此按鈕（使用 JavaScript）：

<div ng-if="product.quoteRequired" class="quote-required">

請幫忙。 我嘗試了很多不同的腳本，但我認為因為按鈕是div.tst_cartPage_buttons的子元素，所以我沒有在 JavaScript 中正確輸入元素

感謝您提供的任何指導。

Answer 1

您可以使用 jquery 框架 ( https://jquery.com/ ) 並輸入：

if ($('#idOfElementToSearch')!=null) $('#elementToHide').hide()

$ 函數對於輕松查找元素很有用，因為它使用了 css 選擇器

$('.btn .primary .btn-request-quote .tst_cartPage_submitQuote').hide()

隱藏所有具有這 4 類的元素

或者，如果您不想使用框架，您可以使用 Document.getElementById() 或 getelementbyclass 而不是 $ 函數，但更難

Answer 2

也許您應該嘗試隱藏第二個元素上使用的相同條件的按鈕。

就像是：

<a ng-if="product.quoteRequired" href="/Rfq" class="btn primary btn-request-quote tst_cartPage_submitQuote" ng-bind="vm.cart.isSalesperson ? 'Create a Quote' : 'Request a Quote'" ng-disabled="vm.cart.isAwaitingApproval">Request a Quote</a>

此外，您使用的是 AngularJS 而不是 Angular 2+。 我建議使用 Angular 2+（目前為 8 版本）以獲得 Typescript 的最佳類型支持。