javascript 相关问题

JavaScript(不要与Java混淆)是一种高级,动态,多范式,面向对象,基于原型的弱类型语言,用于客户端和服务器端脚本。它的主要用途是渲染和操作网页。使用此标记可以了解有关ECMAScript及其各种方言/实现的问题(不包括ActionScript和Google-Apps-Script)。

我在屏幕上看到过滤后的数据,但是当我清除输入时,原始数据没有出现

我在屏幕上看到过滤后的数据,但是当我清除输入时,原始数据没有出现 这里我将 _todayShare 在 标签中按顺序显示为一个项目 分享 我在屏幕上看到过滤后的数据,但当我清除输入时,原始数据没有出现 这里我将 _todayShare 标签中的 <a\> 按顺序显示为项目 <span>Share</span> <input [(ngModel)]="sharedsearchText" (keyup)="applyFilter(sharedsearchText)" style="width: 50%; margin-top: 1px; margin-bottom: 1px;" matInput placeholder="Ara..." /> </div> <div class="list" slim-scroll [slimScrollOptions]="{ height: 450 }"> <a *ngFor=" let item of _todayShare | keyvalue : valueAscOrder; let i = index " style="cursor: pointer" class="transition" (click)="showliveRss(item)" > _todayShare 是一张地图,正如您所理解的,我在下面复制了它,但它再次不起作用。 _todayShare: Map<string, any> = new Map<string, any>(); ngOnInit() { this._todayShare = new Map<string, any>(); .... applyFilter(value: string) { const filterValue = value.trim().toLowerCase(); const filteredMap = new Map<string, any>(); const _todayShareBackup = new Map<string, any>(this._todayShare) _todayShareBackup.forEach((item, key) => { if (key.toLowerCase().includes(filterValue) || JSON.stringify(item).toLowerCase().includes(filterValue)) { filteredMap.set(key, item); } }); this._todayShare = filteredMap } 当我清除此处的输入时,我希望所有数据如下 这里的问题是 applyFilter 函数,其中 _todayShare 被过滤结果覆盖,当过滤器被清除时,它不会恢复原始数据,您需要在过滤之前备份原始数据,所以当您重新过滤它不适用于之前过滤的数据,而是适用于原始数据。 export class YourComponent implements OnInit { _todayShare: Map<string, any> = new Map<string, any>(); _originalTodayShare: Map<string, any>; // This will store the original data ngOnInit() { this._todayShare = new Map<string, any>(); this._originalTodayShare = new Map<string, any>(this._todayShare); // Load your _todayShare data here and then make a copy to _originalTodayShare } applyFilter(value: string) { if (!value.trim()) { // If there is no input, restore the original data this._todayShare = new Map<string, any>(this._originalTodayShare); return; } const filterValue = value.trim().toLowerCase(); const filteredMap = new Map<string, any>(); this._originalTodayShare.forEach((item, key) => { if (key.toLowerCase().includes(filterValue) || JSON.stringify(item).toLowerCase().includes(filterValue)) { filteredMap.set(key, item); } }); this._todayShare = filteredMap; } }

回答 1 投票 0

JavaScript 无法与独立文件中的 HTML 配合,它们在同一个 HTML 文件中工作

所以我做了这个简单的点击按钮的游戏,计时器设置为 5 秒,每次点击计数器都会增加(一切都在同一个文件 [index.html] 中运行)。每当我尝试将代码放入

回答 1 投票 0

如何在shadow DOM中加载javascript文件

我正在尝试让我的滑块组件正常工作。为此,我需要加载 2 个 javascript 文件: <p>我正在尝试让我的滑块组件正常工作。为此,我需要加载 2 个 javascript 文件:</p> <pre><code>&lt;script src=&#34;https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6602cf158fccd6b1f9c2c75c&#34; type=&#34;text/javascript&#34; integrity=&#34;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;script src=&#34;js/webflow.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; </code></pre> <p>这是我的 elements.js 文件中的滑块组件:</p> <pre><code>/* ======================================================================================== */ /* ============================================================== SLIDER */ const sliderTemplate = document.createElement(&#39;template&#39;); sliderTemplate.innerHTML = ` &lt;link href=&#34;css/normalize.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34;&gt; &lt;link href=&#34;css/webflow.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34;&gt; &lt;link href=&#34;css/diamond-heart.webflow.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34;&gt; &lt;section class=&#34;section-wat-we-doen&#34;&gt; &lt;div class=&#34;spacing&#34;&gt; &lt;div id=&#34;w-node-_51899271-5376-bab9-28c6-15a90fc8430a-f9c2c767&#34; class=&#34;holder&#34;&gt; &lt;div id=&#34;w-node-_51899271-5376-bab9-28c6-15a90fc8430b-f9c2c767&#34; class=&#34;above-title white&#34;&gt;Wat we doen&lt;/div&gt; &lt;h2 class=&#34;white&#34;&gt;Zodat jij rust vind&lt;/h2&gt; &lt;/div&gt; &lt;div data-delay=&#34;4000&#34; data-animation=&#34;slide&#34; class=&#34;slider w-slider&#34; data-autoplay=&#34;false&#34; data-easing=&#34;ease&#34; data-hide-arrows=&#34;false&#34; data-disable-swipe=&#34;false&#34; data-autoplay-limit=&#34;0&#34; data-nav-spacing=&#34;3&#34; data-duration=&#34;500&#34; data-infinite=&#34;true&#34;&gt; &lt;div class=&#34;mask w-slider-mask&#34;&gt; &lt;div class=&#34;slide w-slide&#34;&gt; &lt;div class=&#34;w-layout-grid grid-2cols&#34;&gt; &lt;div id=&#34;w-node-_51899271-5376-bab9-28c6-15a90fc84313-f9c2c767&#34; class=&#34;holder&#34;&gt;&lt;img src=&#34;images/starting-the-classes-2023-11-27-04-53-47-utc-1_1.webp&#34; loading=&#34;lazy&#34; sizes=&#34;(max-width: 479px) 94vw, (max-width: 767px) 92vw, 94vw&#34; srcset=&#34;images/starting-the-classes-2023-11-27-04-53-47-utc-1_1starting-the-classes-2023-11-27-04-53-47-utc-1.webp 500w, images/starting-the-classes-2023-11-27-04-53-47-utc-1_1starting-the-classes-2023-11-27-04-53-47-utc-1.webp 800w, images/starting-the-classes-2023-11-27-04-53-47-utc-1_1starting-the-classes-2023-11-27-04-53-47-utc-1.webp 1080w, images/starting-the-classes-2023-11-27-04-53-47-utc-1_1.webp 1920w&#34; alt=&#34;People in a circle&#34; class=&#34;image-full-width&#34;&gt;&lt;/div&gt; &lt;div id=&#34;w-node-_51899271-5376-bab9-28c6-15a90fc84315-f9c2c767&#34; class=&#34;holder&#34;&gt; &lt;h2 class=&#34;orange&#34;&gt;Advaita Vedanta&lt;/h2&gt; &lt;p class=&#34;white&#34;&gt;Tijdens een gesprek, vergadering en voor langere tijd tijdenswoon- of retraite Diamond Heart wijst voortdurendnaar je ware aard, die niet je lichaam of geest is, maar jouwtijdloze ware natuur, geheel in de Advaita traditie.&lt;/p&gt; &lt;a href=&#34;wat-we-doen.html&#34; class=&#34;button textual w-button&#34;&gt;Lees meer&lt;span class=&#34;button-arrow&#34;&gt; &lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;slide w-slide&#34;&gt; &lt;div class=&#34;w-layout-grid grid-2cols&#34;&gt; &lt;div id=&#34;w-node-_51899271-5376-bab9-28c6-15a90fc8431e-f9c2c767&#34; class=&#34;holder&#34;&gt;&lt;img src=&#34;images/relaxing-on-workshops-2023-11-27-05-12-22-utc-1_1.webp&#34; loading=&#34;lazy&#34; sizes=&#34;(max-width: 479px) 94vw, (max-width: 767px) 92vw, 94vw&#34; srcset=&#34;images/relaxing-on-workshops-2023-11-27-05-12-22-utc-1_1relaxing-on-workshops-2023-11-27-05-12-22-utc-1.webp 500w, images/relaxing-on-workshops-2023-11-27-05-12-22-utc-1_1relaxing-on-workshops-2023-11-27-05-12-22-utc-1.webp 800w, images/relaxing-on-workshops-2023-11-27-05-12-22-utc-1_1relaxing-on-workshops-2023-11-27-05-12-22-utc-1.webp 1080w, images/relaxing-on-workshops-2023-11-27-05-12-22-utc-1_1.webp 1920w&#34; alt=&#34;People sleeping in a circle&#34; class=&#34;image-full-width&#34;&gt;&lt;/div&gt; &lt;div id=&#34;w-node-_51899271-5376-bab9-28c6-15a90fc84320-f9c2c767&#34; class=&#34;holder&#34;&gt; &lt;h2 class=&#34;orange&#34;&gt;Advaita&lt;/h2&gt; &lt;p class=&#34;white&#34;&gt;In weekendbijeenkomsten, residentieel of retraites eigentijds teksten en klassieke Advaita-teksten worden gebruikt als vehikel en hulp die altijd wijst naar wat je werkelijk bent, wat dat niet is je lichaam of geest, maar je tijdloze ware aard.&lt;/p&gt; &lt;a href=&#34;wat-we-doen.html&#34; class=&#34;button textual w-button&#34;&gt;Lees meer&lt;span class=&#34;button-arrow&#34;&gt; &lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;slide w-slide&#34;&gt; &lt;div class=&#34;w-layout-grid grid-2cols&#34;&gt; &lt;div id=&#34;w-node-_51899271-5376-bab9-28c6-15a90fc84329-f9c2c767&#34; class=&#34;holder&#34;&gt;&lt;img src=&#34;images/meditating-during-session-2023-11-27-05-00-50-utc-1_1.webp&#34; loading=&#34;lazy&#34; sizes=&#34;(max-width: 479px) 94vw, (max-width: 767px) 92vw, 94vw&#34; srcset=&#34;images/meditating-during-session-2023-11-27-05-00-50-utc-1_1meditating-during-session-2023-11-27-05-00-50-utc-1.webp 500w, images/meditating-during-session-2023-11-27-05-00-50-utc-1_1meditating-during-session-2023-11-27-05-00-50-utc-1.webp 800w, images/meditating-during-session-2023-11-27-05-00-50-utc-1_1meditating-during-session-2023-11-27-05-00-50-utc-1.webp 1080w, images/meditating-during-session-2023-11-27-05-00-50-utc-1_1.webp 1920w&#34; alt=&#34;People meditating in a circle&#34; class=&#34;image-full-width&#34;&gt;&lt;/div&gt; &lt;div id=&#34;w-node-_51899271-5376-bab9-28c6-15a90fc8432b-f9c2c767&#34; class=&#34;holder&#34;&gt; &lt;h2 class=&#34;orange&#34;&gt;Nataraj&lt;/h2&gt; &lt;p class=&#34;white&#34;&gt;Een residentie of toevluchtsoord is als een snelkookpan en geweldig vuur waar alle illusoire ideeën worden verbrand, weggesneden en... verdampt. De hindoegod Nataraj symboliseerde dit mechanisme terwijl Shiva danst terwijl de vlammen wegbranden onwetendheid.&lt;/p&gt; &lt;a href=&#34;wat-we-doen.html&#34; class=&#34;button textual w-button&#34;&gt;Lees meer&lt;span class=&#34;button-arrow&#34;&gt; &lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;left-arrow w-slider-arrow-left&#34;&gt;&lt;img src=&#34;images/arrow-white-right_1.svg&#34; loading=&#34;lazy&#34; alt=&#34;&#34;&gt;&lt;/div&gt; &lt;div class=&#34;right-arrow w-slider-arrow-right&#34;&gt;&lt;img src=&#34;images/arrow-white-right_1.svg&#34; loading=&#34;lazy&#34; alt=&#34;&#34;&gt;&lt;/div&gt; &lt;div class=&#34;slide-nav w-slider-nav w-round&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; ` class Slider extends HTMLElement { constructor() { super(); } connectedCallback() { const shadowRoot = this.attachShadow({ mode: &#39;open&#39; }); shadowRoot.appendChild(sliderTemplate.content); } } customElements.define(&#39;comp-slider&#39;, Slider); </code></pre> <p>无论我如何研究和使用代码,我似乎都无法让它发挥作用。</p> <p>如果可能的话,提供一个简单的解决方案来加载两个 javascript 文件,以便恢复滑块功能。</p> </question> <answer tick="false" vote="0"> <p>尝试将脚本添加到使用 <pre><code>comp-slider</code></pre> 元素的 html 中。</p> <pre><code>&lt;script src=&#34;https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6602cf158fccd6b1f9c2c75c&#34; type=&#34;text/javascript&#34; integrity=&#34;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;script src=&#34;js/webflow.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;comp-slider&gt;&lt;/comp-slider&gt; </code></pre> </answer> </body></html>

回答 0 投票 0

使用 React 创建可排序表不起作用

第一部分包括将表的项目传递给 useSortableData 函数,以及确定排序顺序的配置变量。 const useSortableData = (items, config = null) => { ...

回答 1 投票 0

正则表达式可以选择以任何顺序匹配组

/(?=.*(?foo))(?=.*(?bar))(?=.*(?baz))/ 按照本文中的模式,我尝试创建一个正则表达式来捕获 arbitr 中的某些组...

回答 1 投票 0

使用 useLocation 开玩笑测试自定义钩子

我目前遇到一个情况,我想为我的自定义钩子编写一个单元测试,说useMyHook,其中调用了useLocation 钩子的一个简单例子是……。像这样: 导入 { useState, useEff...

回答 1 投票 0

当您使用新的“结账”按钮时,PayPal 如何禁用浏览器的工具栏访问权限

当您点击 API v2 中的 PayPal 按钮时,浏览器的工具栏等也会变灰且无法访问。当 PayPal 流程完成后,它会重新启用。动作是一样的...

回答 1 投票 0

RXJS 在可能未定义的对象上观察可观察对象

给定两个来源,其中之一可能未定义,我如何组合两者中的最新一个? const observable1 = 间隔(100); const observable2 = this.ref?.observable; // 这是对 angu 的引用...

回答 1 投票 0

Javascript:UInt8Array 到 Float32Array

我有一些使用签名 8 位 PCM 格式的音频缓冲区需要通过网络音频播放,该音频仅接受签名 32 位 PCM。现在我有用于 pcm_u8 数据片段的 ArrayBuffer(来自 Uint8array)。怎么会...

回答 3 投票 0

如何使用 Mongoose 为每个文档插入触发一个函数?

我想在每次在集合中插入/创建元素时触发一个函数,而不是在更新元素时触发一个函数。 (我需要创建的元素的ID) 这就是我所做的: schema.pre("保存&quo...

回答 1 投票 0

有没有办法告诉cefsharp将javascript发送到哪个iframe?

我正在使用 cefsharp 创建自己的应用程序,并使用 ExecuteScriptAsync 将 javascript 发送到正在查看的网站。但是,我遇到了我需要使用的元素嵌套的问题......

回答 1 投票 0

是否可以使用泛型创建动态数组类型?

我目前正在尝试为我的项目制作数组类型 我想做的是,每当我给类型提供参数时,我都想基于它来创建类型。 例子: 类型尺寸=数量; 输入点 我目前正在尝试为我的项目制作数组类型 我想做的是,每当我给类型提供参数时,我都想基于它来创建类型。 示例: type Dimension = Number; type Point<Dimension, T extends Number[] = []> = Dimension extends T['length'] ? T : Point<Dimension, [...T, Number]> type Boundary = ??? // I wanna declare array of length 2N(double of Point<N>) //usage const x = [1,2,3] as Point<3> const xBoundary = [1,2,3,4,5,6] as Boundary<Point<3>> //usage2 const y = [1,2,3,4] as Point<4> const yBoundary = [1,2,3,4,5,6,7,8] as Boundary<Point<4>> 这可能吗? 当我声明Point类型时,我使用了递归类型定义,所以我尝试使用双重递归?并尝试将点类型扩展到边界类型 例如) type Boundary<Point, Dimension, T extends Number[]> = Dimension extends T['length'] ? T : Point<Dimension, [...Point, ...T, Number]>; 但是没有用,因为打字稿无法将 Point 识别为扩展元素,并且编译器接受所有 Number[] 类型。 是的,可以。这是一个例子。 type Point<Length extends number, Current extends number[] = []> = Current['length'] extends Length ? Current : Point<Length, [...Current, number]>; type Boundary<T extends number[]> = [...T,...T] //usage const x = [1,2,3] as Point<3> const xBoundary = [1,2,3,4,5,6] as Boundary<Point<3>> //usage2 const y = [1,2,3,4] as Point<4> const yBoundary = [1,2,3,4,5,6,7,8] as Boundary<Point<4>>

回答 1 投票 0

我的下拉菜单占用了 100vw,但在窗口右侧创建了水平溢出

我正在开发一个自定义导航栏。菜单无法正确打开。它有 100vw,但转到窗口右侧会创建水平滚动。我有 2 个组件导航栏和菜单。菜单

回答 1 投票 0

如何使用 Chrome 扩展程序关闭当前的 Chrome 选项卡?

我即将完成一个简单的 Chrome 扩展的构建,我想添加的最后一件事是关闭当前选项卡。 这个扩展的作用是,当它检测到 Zoom 加入会议时...

回答 2 投票 0

Three.js Cube Geometry - 如何更新参数?

可能是个愚蠢的问题,但就这样吧。 Three.js 几何图形具有与其关联的“参数”字段,请参阅此处的盒子几何图形... 盒子几何参数 我正在尝试更新这些参数...

回答 3 投票 0

Angular 中的跨度中存在间隙,但 AngularJS 中不存在

有 2 个等效的组件模板,其中一个是用 AngularJS 编写的: 有 2 个等效的组件模板,其中一个是用 AngularJS 编写的: <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1" ng-bind="status.message"></span> </span> 新的一个是用现代 Angular 编写的: <span *ngFor="let status of statusList" class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" [ngClass]="appealStatusAdditionalInformationTypesMap[status.informationType].iconClass" ></span> <span class="soh__content soh__content_multiline app-text_addition-1">{{ status.message }}</span> </span> 两者之间的区别在于,在AngularJS中似乎主跨度更大,导致有差距: 而在现代 Angular 中,相同的跨度较小,导致图标之间没有间隙: 生成的html如下(旧的有间隙): <appeal-status-information status-information="rowData.appealStatusAdditionalInformation" applicant-type="rowData.applicantInfo.applicantType" class="ng-isolate-scope"> <!-- ngRepeat: status in statusInformation.statusList | filter : whereFilter --> <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Response received</span> </span> <!-- end ngRepeat: status in statusInformation.statusList | filter : whereFilter --> <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Appeal status: Information received</span> </span> <!-- end ngRepeat: status in statusInformation.statusList | filter : whereFilter --> </appeal-status-information> 新的没有: <appeal-status-information> <span class="show-on-hover ng-star-inserted"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response"></span> <span class="soh__content soh__content_multiline app-text_addition-1">Response received</span> </span> <span class="show-on-hover ng-star-inserted"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline"></span> <span class="soh__content soh__content_multiline app-text_addition-1">Appeal status: Information received</span> </span> <!----> </appeal-status-information> 如您所见,样式相同,但结果却不同。 旧角度的跨度较大可能是什么原因? <ng-container *ngFor="let status of statusList"> <span class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" [ngClass]="appealStatusAdditionalInformationTypesMap[status.informationType].iconClass" ></span> <span class="soh__content soh__content_multiline app-text_addition-1">{{ status.message }}</span> </span> </ng-container> 对 ng 使用 ng-container,这样在查看页面时不会使用 html 中的任何空间或高度宽度

回答 1 投票 0

ios 肖像照片在上传时会翻转为风景

我们有一个用 React 开发的 B2B 市场平台。用户可以提交待售车辆。 我们在处理从 IOS 拍摄的肖像照片时遇到问题。实际上,当用户从他的画廊拍摄照片或

回答 1 投票 0

Web 组件继承父样式,即使使用 all: 初始设置

MVCE 您可以执行以下代码片段: const a = document.createElement("div"); // 在左上角显示大红色矩形 a.style.position = "绝对"; a.style.left = "10px"; a.style.top = "1...

回答 2 投票 0

如何将日期转换为整数?

我有一个日期数组,并且一直在使用 map 函数来迭代它,但我无法弄清楚将它们转换为整数的 JavaScript 代码。 这是日期数组: 变种

回答 6 投票 0

EcmaScript 如何处理递归模块?

最近我在项目中遇到了关于循环依赖的 eslint 警告。我以前认为在 ES 模块中循环引用是不可能的。但显然它们在某些情况下起作用......

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.