占位符不适用于直接输入类型日期和日期时间本地。 占位符不适用于直接输入类型 date 和 datetime-local。 <input type="date" placeholder="Date" /> <input type="datetime-local" placeholder="Date" /> 该字段在桌面上显示 mm/dd/yyy，而在移动设备上则不显示任何内容。 如何显示 Date 占位符文本？ 使用onfocus="(this.type='date')"，例如： <input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/> 使用onfocus和onblur...这是一个例子： <input type="text" placeholder="Birth Date" onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}"> 在这里，我尝试了 data 元素中的 input 属性。并使用 CSS 应用所需的占位符 <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> input[type="date"]::before { content: attr(data-placeholder); width: 100%; } /* hide our custom/fake placeholder text when in focus to show the default * 'mm/dd/yyyy' value and when valid to show the users' date of birth value. */ input[type="date"]:focus::before, input[type="date"]:valid::before { display: none } <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> 希望这有帮助 <input type="text" placeholder="*To Date" onfocus="(this.type='date')" onblur="(this.type='text')" > 这段代码对我有用。只需使用这个即可 对于 Angular 2，你可以使用这个指令 import {Directive, ElementRef, HostListener} from '@angular/core'; @Directive({ selector: '[appDateClick]' }) export class DateClickDirective { @HostListener('focus') onMouseFocus() { this.el.nativeElement.type = 'date'; setTimeout(()=>{this.el.nativeElement.click()},2); } @HostListener('blur') onMouseBlur() { if(this.el.nativeElement.value == ""){ this.el.nativeElement.type = 'text'; } } constructor(private el:ElementRef) { } } 并像下面一样使用它。 <input appDateClick name="targetDate" placeholder="buton name" type="text"> 对于 React，你可以这样做。 const onDateFocus = (e) => (e.target.type = "datetime-local"); const onDateBlur = (e) => (e.target.type = "text"); . . . <input onFocus={onDateFocus} onBlur={onDateBlur} type="text" placeholder="Event Date" /> 我是这样做的： var dateInputs = document.querySelectorAll('input[type="date"]'); dateInputs.forEach(function(input) { input.addEventListener('change', function() { input.classList.add('no-placeholder') }); }); input[type="date"] { position: relative; } input[type="date"]:not(.has-value):before { position: absolute; left: 10px; top: 30%; color: gray; background: var(--primary-light); content: attr(placeholder); } .no-placeholder:before{ content:''!important; } <input type="date" name="my-date" id="my-date" placeholder="My Date"> 现代浏览器使用 Shadow DOM 来方便输入日期和日期时间。因此，除非浏览器出于某种原因选择回退到 text 输入，否则不会显示占位符文本。您可以使用以下逻辑来适应这两种情况： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 我使用了 Tailwind CSS 语法，因为它很容易理解。让我们一点一点地分解它： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } 使用其 Shadow DOM 伪元素选择器隐藏本机选择器图标（通常是日历）。 input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } 选择所有未显示占位符的 date 和 datetime-local 输入，并且： 默认使用 placeholder 伪元素显示输入 ::before 文本 在小屏幕及以上屏幕上切换为使用 ::after 伪元素 input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 设置 ::before 和 ::after 伪元素的样式。
此输入标签的 Xpath 是什么 ” 此输入标签的 Xpath 是什么 "<input autocapitalize="sentences" autocorrect="off" class="css-1cwyjr8 r-19sur4y r-qklmqi r-1phboty r-1wdu9aa r-ubezar r-16dba41 r-10paoce r-12rqra3 r-13qz1uu" dir="auto" spellcheck="false" type="email" data-focusable="true" value="" style="font-family: inherit;"> 如果只有 @type=email 的元素，则可以使用 //input[@type='email']
我有一个带有选择器的多输入组件，如下所示： 我有一个带有选择器的多输入组件，如下所示： <app-input type="currency" formControlName="currency"></app-input> <app-input type="date" formControlName="dateOfBirth"></app-input> 因此，从该组件中，我有一个像这样的选择器： @Component({ selector: 'app-input[type=currency]', }) @Component({ selector: 'app-input[type=date]', }) 现在，我想添加多个 currency 组件。一种用于默认货币成分，第二种用于具有动态货币符号的货币。 所以，我想通过选项让它变得不同。当选择器有选项时，显示带动态符号的货币，否则或默认，显示不带符号的默认货币。 我一直在尝试使用下面的这个选择器，但它不起作用。 对于默认货币： @Component({ selector: 'app-input:not([options])[type=currency]', }) 对于动态符号货币： @Component({ selector: 'app-input[options][type=currency]', }) 提前谢谢您 您可以像这样添加数据属性来区分选择器 无符号： @Component({ selector: 'app-input[type=currency]', }) 带有符号： @Component({ selector: 'app-input[type=currency][data-symbols]', }) html with symbols: <app-input type="currency" formControlName="currency" data-symbols></app-input> without symbols: <app-input type="currency" formControlName="currency"></app-input>
我尝试在ajax中发送表单而不重新加载页面，但我看到，文件上的链接不存在...... 我有下一个表格： 我尝试在ajax中发送表单而不重新加载页面，但我看到，文件上的链接不存在... 我有下一个表格： <form id="settings" method="POST" enctype="multipart/form-data"> ... <input type="file" id="logo" style="display:none;" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">save</button> </form> Ajax 脚本： $('#settings').submit(function(e){ e.preventDefault(); var form = $(this).serialize(); alert(form); // file is not attached... $.ajax({ url : '/settings', type : 'POST', crossDomain : false, data : form, contentType : 'multipart/form-data', dataType : 'json', progressData: false, cache : false, success : function(r){ alert (111); } }).fail(function(){ console.log('Error occured!'); }); }); 在服务器端，我收到错误： org.apache.tomcat.util.http.fileupload.FileUploadException：请求被拒绝，因为未找到多部分边界 我尝试不序列化表单，而是写了 data : form -> data : new FormData(this) 此选项会导致错误“非法调用”。如何在不重新加载页面的情况下发送带有文件的表单？ 要使用 AJAX 发送带有文件的表单而不重新加载页面，您需要使用 FormData 来正确处理文件上传。 <form id="settings" method="POST" enctype="multipart/form-data"> <!-- Other form fields --> <input type="file" id="logo" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">Save</button> </form> $(document).ready(function() { $('#settings').submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ url: '/settings', type: 'POST', data: formData, contentType: false, processData: false, cache: false, success: function(response){ alert('Form submitted successfully!'); // Handle the response from the server }, error: function(){ console.log('Error occurred!'); } }); }); });
我有这个输入，每次我们点击它里面的时候它都会被清除。 问题： 我只想在 value = [email protected] 时清除 函数clearThis(tar...</desc> <question vote="47"> <p>我有这个INPUT，每次我们点击它里面它就会清除。</p> <p>问题： 我只想在值 = <a href="/cdn-cgi/l/email-protection" data-cfemail="2d485548405d41426d485548405d4142034e4240">[电子邮件受保护]</a></p> 时清除 <pre><code><script type="text/javascript"> function clearThis(target) { target.value= ""; } </script> <input type="text" name="email" value="<a href="/cdn-cgi/l/email-protection" data-cfemail="9cf9e4f9f1ecf0f3dcf9e4f9f1ecf0f3b2fff3f1">[email protected]</a>" size="30" onfocus="clearThis(this)"> </code></pre> <p>有人可以帮我做到这一点吗？ 我不知道如何比较，我已经尝试过但没有成功。</p> </question> <answer tick="true" vote="57"> <pre><code><script type="text/javascript"> function clearThis(target) { if (target.value == '<a href="/cdn-cgi/l/email-protection" data-cfemail="4a2f322f273a26250a2f322f273a262564292527">[email protected]</a>') { target.value = ""; } } </script> </code></pre> <p>这真的是您想要的吗？</p> </answer> <answer tick="false" vote="18"> <p>对我来说这是最好的方法：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code><form id="myForm"> First name: <input type="text" name="fname" value="Demo"><br> Last name: <input type="text" name="lname"><br><br> <input type="button" onclick="myFunction()" value="Reset form"> </form> <script> function myFunction() { document.getElementById("myForm").reset(); } </script></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="4"> <p>您可以使用属性<pre><code>placeholder</code></pre></p> <pre><code><input type="text" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" data-cfemail="42273a272f322e2d02273a272f322e2d6c212d2f">[email protected]</a>" size="30" /> </code></pre> <p>或者在旧版浏览器上尝试这个</p> <pre><code><input type="text" name="email" value="<a href="/cdn-cgi/l/email-protection" data-cfemail="bdd8c5d8d0cdd1d2fdd8c5d8d0cdd1d293ded2d0">[email protected]</a>" size="30" onblur="if(this.value==''){this.value='<a href="/cdn-cgi/l/email-protection" data-cfemail="aacfd2cfc7dac6c5eacfd2cfc7dac6c584c9c5c7">[email protected]</a>';}" onfocus="if(this.value=='<a href="/cdn-cgi/l/email-protection" data-cfemail="03667b666e736f6c43667b666e736f6c2d606c6e">[email protected]</a>'){this.value='';}"> </code></pre> </answer> <answer tick="false" vote="4"> <p>您可以使用占位符，因为它可以为您做到这一点，但对于不支持占位符的旧浏览器，请尝试以下操作：</p> <pre><code><script> function clearThis(target) { if (target.value == "<a href="/cdn-cgi/l/email-protection" data-cfemail="402538252d302c2f002538252d302c2f6e232f2d">[email protected]</a>") { target.value = ""; } } function replace(target) { if (target.value == "" || target.value == null) { target.value == "<a href="/cdn-cgi/l/email-protection" data-cfemail="73160b161e031f1c33160b161e031f1c5d101c1e">[email protected]</a>"; } } </script> <input type="text" name="email" value="<a href="/cdn-cgi/l/email-protection" data-cfemail="ddb8a5b8b0adb1b29db8a5b8b0adb1b2f3beb2b0">[email protected]</a>" size="x" onfocus="clearThis(this)" onblur="replace(this)" /> </code></pre> <p>代码说明：当文本框获得焦点时，清除该值。当文本框未聚焦且文本框为空时，替换值。</p> <p>我希望这有效，我一直遇到同样的问题，但后来我尝试了这个，它对我有用。</p> </answer> <answer tick="false" vote="0"> <p>试试这个：</p> <pre><code><script type="text/javascript"> function clearThis(target){ if(target.value == "<a href="/cdn-cgi/l/email-protection" data-cfemail="67021f020a170b0827021f020a170b084904080a">[email protected]</a>") { target.value= ""; } } </script> </code></pre> <p></p> </answer> <answer tick="false" vote="0"> <pre><code><script type="text/javascript"> function clearThis(target){ if (target.value === "<a href="/cdn-cgi/l/email-protection" data-cfemail="a2c7dac7cfd2cecde2c7dac7cfd2cecd8cc1cdcf">[email protected]</a>") { target.value= ""; } } </script> <input type="text" name="email" value="<a href="/cdn-cgi/l/email-protection" data-cfemail="c7a2bfa2aab7aba887a2bfa2aab7aba8e9a4a8aa">[email protected]</a>" size="30" onfocus="clearThis(this)"> </code></pre> <p>在这里尝试一下：<a href="http://jsfiddle.net/2K3Vp/" rel="nofollow">http://jsfiddle.net/2K3Vp/</a></p> </answer> <answer tick="false" vote="0"> <p>你不需要为此烦恼。就写吧</p> <pre><code><input type="text" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" data-cfemail="06637e636b766a6946637e636b766a692865696b">[email protected]</a>" size="30"> </code></pre> <p>用占位符替换该值</p> </answer> <answer tick="false" vote="0"> <p>不要使用 <strong>placeholder</strong> 属性清除名称文本，这是一个很好的做法</p> <pre><code><input type="text" placeholder="name" name="name"> </code></pre> </answer> <answer tick="false" vote="0"> <p>我对所有这些答案感到惊讶，没有人提到最简单、现代的方法来做到这一点：</p> <pre><code><input type="text" placeholder="Your Name" onfocus="this.placeholder=''" onblur="this.placeholder='Your Name'" > </code></pre> <p>仅当您想在用户单击远离输入后恢复原始占位符时，才需要 <pre><code>onblur</code></pre>。</p> </answer> </body></html>
如果您想在 web.config 中实现 SQL 会话，通常会有一些简单的内容，例如： 如果您想在 web.config 中实现 SQL 会话，通常会有一些简单的内容，例如： <sessionState mode="SQLServer" sqlConnectionString="myConnectionString"/> 但是，如果您想要一个自定义提供程序来执行诸如使用配置生成器隐藏连接字符串之类的操作，您可以编写以下内容： <sessionState mode="Custom" customProvider="SQLSessionProvider"> <providers> <add name="SQLSessionProvider" connectionStringName="SQLSessionService" type=""/> </providers> </sessionState> <connectionStrings configBuilders="CS_Environment"> <add name="SQLSessionService" connectionString="Environment_Key_Here" /> </connectionStrings> 问题是我不知道mode=SQLServer存在什么类型。在我的搜索中，我看到了 OBDC 会话的示例，其中 type=ObdcSessionStateStore 以及各种其他会话提供程序，但没有一个适用于 SQLServer。 SQLServer 存在哪些会话提供程序类型？ 您可以使用此功能并通过 Nuget Package Manager 安装的 type 是 Microsoft.AspNet.SessionState.SqlSessionStateProviderAsync 还应该安装SessionState.SessionStateModule。如果您是第一次将其安装到项目中，它将在您的 <sessionState> 中为您创建一个 web.config 模板。下面是如何使用它的示例： <connectionStrings configBuilders="CS_Environment"> <add name="SQLSession_Connection" providerName="System.Data.SqlClient" connectionString="SQLSessionProvider-configBuilder_failed" /> </connectionStrings> <sessionState cookieless="false" regenerateExpiredSessionId="true" mode="Custom" customProvider="SqlSessionStateProviderAsync"> <providers> <add name="SqlSessionStateProviderAsync" connectionStringName="SQLSession_Connection" type="Microsoft.AspNet.SessionState.SqlSessionStateProviderAsync, Microsoft.AspNet.SessionState.SqlSessionStateProviderAsync, Version=1.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> </providers> </sessionState> @8protons，您以前有使用过 Microsoft.AspNet.SessionState.SqlSessionStateProviderAsync 的经验吗？我收到“在应用程序配置中找不到或连接字符串为空”错误 lmk 如果您能提供帮助
如果类型是从变量进行数据绑定，则通过 <object> 标签在 Angular 中显示 pdf 无法在 Chrome 中工作
我正在尝试通过 标签在 Chrome 中显示 pdf。 如果我手动编写类型，它会起作用： 不工作 但是... 我正在尝试通过 <object> 标签在 Chrome 中显示 pdf。 如果我手动写 type: 就可以了 <object [data]="getUrl(true)" type="application/pdf"> Not working </object> 但如果我从变量读取类型则不会： <object [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> 为什么？这是一些非常奇怪的错误，还是我做错了什么可怕的事情。 这里是plunkr。 它可以在 Firefox 中运行（所有 4 个对象都会显示），但不能在 Chrome 中运行 (Version 74.0.3729.169 (Official Build) (64-bit))： 我遇到了同样的问题，但我不明白原因。 就我而言，我决定在基于 Blink 引擎的浏览器中使用“embed”元素而不是“object”元素。 <ng-template #blinkPlatformViewer> <embed [src]="getUrl(true)" [type]="file.mimeType"/> </ng-template> <object *ngIf="!isBlinkPlatform; else blinkPlatformViewer" [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> import { Platform } from '@angular/cdk/platform'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; export class FileContentComponent { constructor(private readonly sanitizer: DomSanitizer, private readonly platform: Platform) { } get isBlinkPlatform(): boolean { return this.platform.BLINK; } }
希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html 希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本，我尝试加载此页面： 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们，它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达，因为加载页面时已经触发了此事件（模态在之后加载...） 尝试直接插入脚本，如下所示： <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时，shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });
如何使用 Bootstrap 5 禁用自定义范围而不更改样式？
我有范围： 我有范围： <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%"> </div> </body> </html> 我想禁用它（它应该仍然看起来一样，但用户不能再与它交互），但是不改变样式。例如： 图中，顶部的启用，底部的禁用；我想禁用它，同时保持顶级范围的样式。 我尝试手动重新创建原始样式，但没有成功： <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> <style> input[type=range]:disabled { background-color: blue; color: blue; background: blue; } </style> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%" disabled> </div> </body> </html> 除此之外，我在研究中找不到任何其他可能的解决方案。 您实际上需要“如何”禁用它？ 设置 pointer-events: none 并添加 tabindex="-1"，你会得到一个看起来仍然相同的元素，但用户无法再与之交互（至少通过鼠标单击/点击，并且他们无法通过键盘将其聚焦）控制其中之一 - 不确定是否还有其他什么？） 由于没有设置 name 属性，该字段不会成为表单提交数据集的一部分 - 如果在您的实际用例中有所不同，您也可以删除（并重新设置）名称，当您可以打开和关闭 tabindex。
我正在尝试使用 DomDocument 获取下面表单的值，但到目前为止仍然失败 我正在尝试使用 DomDocument 获取下面表单的值，但到目前为止仍然失败 <?php $string ='<form action="profile" method="post" enctype="multipart/form-data"> <input type="hidden" name="id_user" id="id_user" value="123"> <input type="hidden" name="logo" id="logo" value="path/to/logo1.png"> <input type="hidden" name="status" id="status" value="Ok"> <input type="submit" value="PROFILE"> </form>'; ?> 这种情况下如何正确使用DomDocument？ 我正在尝试下面的代码 $dom = new DomDocument(); $dom->loadHTML($string); $dom->getElementById("id_user"); 我期望得到 123 作为返回值 DomDocument 有点麻烦，但如果您遵循文档，您就可以到达那里。我找到了这条路线： $dom->getElementById("id_user")->attributes->getNamedItem("value")->value 返回： 123 参见：https://onlinephp.io/c/c37dc 可能还有其他方法可以做到同样的事情。
我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例： 我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" /> <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script> <style> body { margin: 0; } #map { width: 100%; height: 100vh; } .carousel { max-width: 300px; margin: 10px auto; } .carousel img { width: 100%; height: auto; } /* Custom styling for Geiranger popup content */ .geiranger-popup-content { max-width: 500px; padding: 20px; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([61.9241, 6.7527], 6); var streetViewMarker = null; // Variable to keep track of the Street View marker L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var roadTripCoordinates = [ [59.9139, 10.7522], // Oslo [62.2622, 10.7654], // Tynset [62.5949, 9.6926], // Oppdal [63.0071, 7.2058], // Atlantic Road [62.1040, 7.2054] // Geiranger ]; // Function to initialize Slick Carousel for a specific marker function initSlickCarousel(markerId, images) { $(`#${markerId}_carousel`).slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, dots: true, arrows: true }); // Add images to the carousel images.forEach(img => { $(`#${markerId}_carousel`).slick('slickAdd', `<div><img src="${img}" alt="Image"></div>`); }); } // Add markers for each destination with additional information and multiple pictures var destinations = [ { coordinates: [59.9139, 10.7522], name: 'Oslo', info: "../07/2023 : Start of the road-trip", images: ['https://www.ecologie.gouv.fr/sites/default/files/styles/standard/public/Oslo%2C%20Norvege_AdobeStock_221885853.jpeg?itok=13d8oQbU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.2622, 10.7654], name: 'Tynset', info: "../07/2023 : Fly-fishing spot 1", images: ['https://www.czechnymph.com/data/web/gallery/fisheries/norway/glommahein/Kvennan_Fly_Fishing_20.jpg', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.5949, 9.6926], name: 'Oppdal', info: "../07/2023 : Awesome van spot for the night", images: ['https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFRtpLlHWr8j6S2jNStnq6_Z9qBe0jWuFH8Q&usqp=CAU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [63.0071, 7.2058], name: 'Atlantic Road', info: "../07/2023 : Fjord fishing", images: ['https://images.locationscout.net/2021/04/atlantic-ocean-road-norway.jpg?h=1100&q=83', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.1040, 7.2054], name: 'Geiranger', info: "../07/2023 : Hiking 1", images: ['https://www.fjordtours.com/media/10968/nicola_montaldo-instagram-26th-may-2021-0717-utc.jpeg?anchor=center&mode=crop&width=1120&height=1120&rnd=133209254300000000&slimmage=True', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] } ]; // Use Leaflet Routing Machine with Mapbox Routing plugin to get and display the route L.Routing.control({ waypoints: roadTripCoordinates.map(coord => L.latLng(coord[0], coord[1])), router: L.Routing.mapbox('MAP_BOX_KEY'), draggableWaypoints: false, addWaypoints: false, lineOptions: { styles: [{ color: 'brown', opacity: 0.7, weight: 2 }] } }).addTo(map); // Remove the leaflet-routing-container from the DOM var routingContainer = document.querySelector('.leaflet-routing-container'); if (routingContainer) { routingContainer.parentNode.removeChild(routingContainer); } destinations.forEach(function (destination) { var marker = L.marker(destination.coordinates).addTo(map); var markerId = destination.name.replace(' ', '_'); marker.bindPopup(` <b>${destination.name}</b><br> ${destination.info}<br> <div class="carousel" id="${markerId}_carousel"></div> `).on('popupopen', function () { // Initialize Slick Carousel when the marker popup is opened initSlickCarousel(markerId, destination.images); }).openPopup(); }); // Add Street View panorama on map click map.on('click', function (e) { if (streetViewMarker) { // Remove the existing Street View marker map.removeLayer(streetViewMarker); } let lat = e.latlng.lat.toPrecision(8); let lon = e.latlng.lng.toPrecision(8); streetViewMarker = L.marker([lat, lon]).addTo(map) .bindPopup(`<a href="http://maps.google.com/maps?q=&layer=c&cbll=${lat},${lon}&cbp=11,0,0,0,0" target="blank"><b> Cliquer ici pour avoir un aperçu de la zone ! </b></a>`).openPopup(); }); </script> </body> </html> 一切都按预期进行，我不得不说我对渲染非常满意。然而，通过查看 Stackoverflow 上的不同主题，我发现可以通过单击地图来显示 Google 街景视图。这个功能真的很酷，但我想限制仅在我的公路旅行行程中添加街景标记的选项。 有人可以帮我吗？ 您通过创建挪威夏季公路旅行地图开始了学习 Leaflet 和 JavaScript 的旅程，真是太棒了。到目前为止，您的项目设置看起来不错，我很乐意在您的进展过程中提供指导或帮助。 既然您已经包含了 Leaflet、Slick Carousel 和 Leaflet Routing Machine 库，看来您正计划使用 Slick Carousel 创建一个带有路线的交互式地图，也许还有一些附加功能。 以下是一些增强您的项目的建议： 地图初始化： 使用初始视图和要显示的任何特定标记或图层设置您的传单地图。 路由功能： 利用 Leaflet Routing Machine 将动态路线添加到您的地图。您可以自定义路线、添加航点并提供逐向指示。 照片轮播： 既然您提到了公路旅行地图，请考虑集成 Slick Carousel 来展示旅途中关键地点的照片或描述。这可以为您的地图添加视觉上吸引人的元素。 地图控制： 探索 Leaflet 插件或内置控件以增强用户体验。例如，您可以添加缩放控件或比例尺。 响应式设计： 确保您的地图能够响应不同的设备。 Leaflet 通常适合移动设备，但如果需要的话进行测试和调整是一个很好的做法。 数据层： 如果您有与您的公路旅行相关的特定数据点或事件，您可以使用标记或其他视觉元素在地图上表示它们。 JavaScript 交互性： 使用 JavaScript 为地图添加交互性。对于 ㅤ 实例，当用户单击标记时，您可以创建包含附加信息的弹出窗口。 记得迭代测试你的项目，并参考每个库的文档以获取详细的使用说明。 如果您有具体问题或在此过程中遇到挑战，请随时提问。祝您的公路旅行地图项目好运！
jQuery Ajax 在 php 同一页面上传递值 - 更新
如何找回： 如何找回： <div id="test"> <?php if (isset($_POST['sweets'])) { ob_clean(); echo $_POST['sweets']; exit; } ?> </div> <form id="a" action="" method="post"> <select name="sweets" onchange="change()" id="select1"> <option >Chocolate</option> <option selected="selected">Candy</option> <option >Taffy</option> <option >Caramel</option> <option >Fudge</option> <option >Cookie</option> </select> </form> <!-- Script --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> function change() { var sweets = $("#select1").val(); $.ajax({ type: "POST", data: { sweets: sweets }, success: function(data) { $("#test").html(data); } }); } </script> 将值传递给 php 字符串： $string = $_POST['sweets']; <!-- I'm looking for this: --> 我希望这是可能的。我在 stackoverflow 和 google 上寻找答案，但找不到适合我的目的的答案。 对于同一个页面的ajax/PHP脚本，可以将PHP放在脚本的最前面，当有POST提交数据时以exit结束 为了使其更有意义，您应该返回与您通过 POST 提交的内容相关的内容（这是甜食的类型），作为示例，我们展示其一般定义。我们可以使用 switch，这是用于此目的的常用结构： switch ($string) { case "Chocolate": echo "Chocolate is made from cocoa beans, the dried and fermented seeds of the cacao tree"; break; case "Candy": echo "Candy is a sweet food made from sugar or chocolate, or a piece of this"; break; case "Taffy": echo "Taffy is a type of candy invented in the United States, made by stretching and/or pulling a sticky mass of a soft candy base"; break; case "Caramel": echo "Caramel is made of sugar or syrup heated until it turns brown, used as a flavouring or colouring for food or drink"; break; case "Fudge": echo "Fudge is a dense, rich confection typically made with sugar, milk or cream, butter and chocolate or other flavorings"; break; case "Cookie": echo "A cookie (American English) or biscuit (British English) is a baked snack or dessert that is typically small, flat, and sweet"; break; } exit; } ?> 所以以下是示例代码： <?php if (isset($_POST['sweets'])) { // ob_clean(); $string = $_POST['sweets']; switch ($string) { case "Chocolate": echo "Chocolate is made from cocoa beans, the dried and fermented seeds of the cacao tree"; break; case "Candy": echo "Candy is a sweet food made from sugar or chocolate, or a piece of this"; break; case "Taffy": echo "Taffy is a type of candy invented in the United States, made by stretching and/or pulling a sticky mass of a soft candy base"; break; case "Caramel": echo "Caramel is made of sugar or syrup heated until it turns brown, used as a flavouring or colouring for food or drink"; break; case "Fudge": echo "Fudge is a dense, rich confection typically made with sugar, milk or cream, butter and chocolate or other flavorings"; break; case "Cookie": echo "A cookie (American English) or biscuit (British English) is a baked snack or dessert that is typically small, flat, and sweet"; break; } exit; } ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select name="sweets" onchange="change()" id="select1"> <option value="">Please select</option> <option >Chocolate</option> <option >Candy</option> <option >Taffy</option> <option >Caramel</option> <option >Fudge</option> <option >Cookie</option> </select> <br><br> <div id="test"></div> <script> function change() { var sweets = $("#select1").val(); $.ajax({ type: "POST", data: { sweets: sweets }, success: function(data) { $("#test").html(data); } }); } </script>
以下是选择选项的代码： 这是选择选项的代码： <div class="modal-body row"> <form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data"> <div class="form-group col-md-6"> <label for="exampleInputEmail1"><?php echo lang('categorie'); ?></label> <select class="form-control m-bot15" name="categorie" value='' id="p_category"> <option value="#"> Sélectionner catégorie</option> <?php foreach ($categories as $category) { ?> <option value="category"><?php if (!empty($setval)) { if ($category->category == set_value('category')) { echo 'selected'; } } if (!empty($patient->category)) { if ($category->category == $patient->category) { echo 'selected'; } } ?> > <?php echo $category->category; ?> </option> <?php } ?> </select> </div> 这是应该显示/隐藏的 Div： <div class="form-group col-md-6" id="divCacher" style="display: none"> <label for="exampleInputEmail1"><?php echo lang('name_husband'); ?></label> <input type="text" class="form-control" name="name_Us" id="nameUs" placeholder=""> <label for="exampleInputEmail1"><?php echo lang('number_pregnancy'); ?></label> <input type="number" class="form-control" name="number_pregnancy" id="nbreEnfants" placeholder=""> </div> 这是 JavaScript 代码： $(document).ready(function () { $('.divCacher').hide(); $(document.body).on('change', '#p_category', function () { var v = $("select.p_category option:selected").val() if (v == 'Fe_Ence') { $('.divCacher').show(); } else { $('.divCacher').hide(); } }); }); 我希望如果我们选择 Fe_Ence 类别，则 div 会显示，否则，它会保持隐藏 您需要将 $category 设置为选项值更改此： <option value="category"> 对此： <option value="<?=$category?>"> 以下是适用于更多此类情况的示例： <!--SELECT INPUT--> <select id="p_category"> <option value=""> Sélectionner catégorie</option> <?php foreach ($categories as $category): ?> <option value="<?=$category?>"><?=$category?> <?php endforeach;?> </select> <!--Container List--> <div class="cat-container" data-id="test1"> <h1>This is Test1 Category</h1> </div> <div class="cat-container" data-id="Fe_Ence"> <h1>This is Fe_Ence Category</h1> </div> <div class="cat-container" data-id="test3"> <h1>This is test3 Category</h1> </div> // Javascript code checkCategory(); $("#p_category").on('change', checkCategory) function checkCategory() { $('.cat-container').hide() const selected = $('#p_category').val() if (!selected) return; $(`[data-id=${selected}`).show() }
使 arrayList.toArray() 返回更具体的类型
所以，通常 ArrayList.toArray() 会返回一个 Object[] 类型....但假设它是一个 对象 Custom 的 Arraylist，如何使 toArray() 返回 Custom[] 类型而不是 Object[] 类型？
我有一个引导选项卡区域，并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。 $('#tabList b...</desc> <question vote="0"> <p>我有一个引导选项卡区域，并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script type="text/javascript"> $('#tabList button').click ( function (e) { e.preventDefault(); // bootstrap.Tab.getInstance(this).show() $(this).tab('show') } ); </script></code></pre> <pre><code><ul class="nav nav-tabs" id="tabList" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs" type="button" role="tab" aria-controls="jobs" aria-selected="true">[tabHeaderJobs]</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link active" id="employees-tab" data-bs-toggle="tab" data-bs-target="#employees" type="button" role="tab" aria-controls="employees" aria-selected="false">[tabHeaderEmployees]</button> </li> </ul> <div class="tabContent" id="tabContent"> <div class="tab-pane fade" id="jobs" role="tabpanel" aria-labelledby="jobs-tab">[tabContentJobs]</div> <div class="tab-pane fade active show" id="employees" role="tabpanel" aria-labelledby="employees-tab">[tabContentEmployees]</div> </div></code></pre> </div> </div> <p></p> <p>´´´</p> <p>主选择器是 tabList 还是 tabContent ？</p> <p>那么我是否需要从按钮中选择切换名称，然后使用 <pre><code>($('#tabContent a[href="#toggleNameOfTab"]').tab('show')</code></pre> ？</p> </question> <answer tick="false" vote="0"> <p>根据您更新的代码，有几件事：</p> <ol> <li>无需选择<pre><code>#tabContent a</code></pre>。您的选项卡按钮已经具有 <pre><code>.nav-link</code></pre> 类，因此您可以将单击处理程序直接附加到这些按钮：</li> </ol> <pre><code>$('.nav-link').click(function() { $(this).tab('show'); }); </code></pre> <ol start="2"> <li>要以编程方式激活页面加载时的特定选项卡，您可以执行以下操作：</li> </ol> <pre><code>$('#employees-tab').tab('show'); </code></pre> <p>这将在加载时激活#employees-tab。</p> <p>需要了解的关键事项：</p> <ul> <li>使用 <pre><code>.nav-link</code></pre> 将点击处理程序附加到选项卡按钮</li> <li>使用 <pre><code>$(selector).tab('show')</code></pre> 以编程方式切换选项卡，其中 <pre><code>selector</code></pre> 是选项卡按钮的 ID 或元素</li> </ul> </answer> </body></html>
如何使用javascript forloop在点击时获取html中data-id的值并返回值
这是我的html {% if t_ques %} 今天 {% 表示 t_... 中的项目 这是我的html <ul class="conversations"> {% if t_ques %} <li class="grouping">Today</li> {% for item in t_ques %} <li class="active"> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if y_ques %} <li class="grouping">Yesterday</li> {% for item in y_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if s_ques %} <li class="grouping">Previous 7 days</li> {% for item in s_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if more_s_ques %} <li class="grouping">Previous 30 days</li> {% for item in more_s_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} </ul> </div> 我一直在尝试使用 JavaScript 单击时获取任何 data-pk 的值，但似乎无法实现。这一直说 currentTarget 未定义，当我用 target 替换它时，它说同样的事情。然后，如果我将其替换为 document.querySelector("#convers")，它只会给出第一个值，无论单击哪个 这是我的 JavaScript const conversationButtons = document.querySelectorAll("#convers"); conversationButtons.forEach(button => { button.addEventListener("click", getId); }); function getId(e){ var idValue = e.currentTarget.getAttribute('data-pk'); console.log(idValue); //output corresponding target-id if(!chat_id){ url = `/chat-previous/${idValue}/` }else{ url = 'initiate-chat/' } return url; } $.ajax({ type: 'POST', url: getId(), data: { message: usermsg, chatId: chat_id, // itemId: item_id, csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(), action: 'post' }, success: function(json){ const res = json['chats'] setTimeout(() => { hideTyping(); body.appendChild(mgses(res, "assistant")); scrollToBottomOfResults(); }, 1000); console.log(json) }, error: function(rs, e){ setTimeout(() => { hideTyping(); body.appendChild(setBotResponse("bot")); scrollToBottomOfResults(); }, 600); console.log(rs.error); }, }); 我使用了其他方法，例如 const getId = () => { console.log(document.querySelector(".conversation-button").getAttribute('data-pk')) if(!chat_id){ url = `/chat-previous/${document.querySelector(".conversation-button").getAttribute('data-pk')}/` }else{ url = 'initiate-chat/' } return url; } conversationButtons.forEach(button => { button.addEventListener("click", getId); console.log(button.getAttribute('data-pk')); }); 仍然无法得到我真正想要的。有什么方法可以实现这个目标吗？ 委托并使用按钮的类 document.querySelector('.conversations').addEventListener('click', (e) => { let tgt = e.target.closest('.conversation-button'); if (!tgt) return; const idValue = tgt.dataset.pk; console.log(idValue); //output corresponding target-id return chat_id ? 'initiate-chat/' : `/chat-previous/${idValue}/` }) 您做出了多个错误的假设，第一个是您不能有多个具有相同 id 的元素，这将导致您描述的确切行为“它需要第一次出现的 id” 第二件事是你可能想在点击时发出ajax请求，但你构建代码的方式并不能做到这一点。 要解决这些问题，请生成如下 html button.conversation-button button.conversation-button button.conversation-button 然后向所有具有 .conversation-button 类的元素添加一个事件侦听器，并将您的 ajax 调用包装到一个函数中，主要是您已经拥有的函数。 const conversationButtons = document.querySelectorAll(".conversation-button"); conversationButtons.forEach(button => { button.addEventListener("click", doStuff); }); ... function doStuff(e) { $.ajax( ... url: getId(e) ... } function getId(e) { let idValue = e.currentTarget.getAttribute('data-pk'); let url = ...; ... return url; // } 只是一些伪代码让你得到一个想法，祝你好运:)
ASP.NET MVC 项目模板在移动设备上无法调整为 100%
我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。 我在视图上使用数据表： @模型IEnumerable 我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。 我在视图上使用数据表： @model IEnumerable<iziConference.Models.EventAttendee> <h2>Participantes.</h2> <br /> <button><a style="text-decoration: none" href='@Url.Action("Create", new { eventId = ViewBag.EventId })'>Criar Participante</a></button> <button id="at-btn-refresh"> Actualizar</button> <input id="eventId" type="hidden" value="@ViewBag.EventId"> <table id="at-attendees-list" cellpadding="10" border="1" class="row-border stripe"> <thead> <tr> <th>ID</th> <th>Tipo</th> <th>Nome</th> <th>Email</th> <th>Estado </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr id="[email protected]_Id"> <td style="padding: 5px"> @Html.DisplayFor(modelItem => item.Attendee.Id) </td> <td> @Html.DisplayFor(modelItem => item.AttendeeType) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Name) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Email) </td> <td> @if (item.IsActive) { <button id="[email protected]_Id" class="at-btn-active-state active" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="false" data-show-confirmation-alert="true">Desactivar</button> } else { <button id="[email protected]_Id" class="at-btn-active-state inactive" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="true" data-show-confirmation-alert="true">Activar</button> } </td> </tr> } </tbody> </table> 由脚本加载： var _atteendeesList = "at-attendees-list"; $("#" + _atteendeesList).DataTable({ "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 使用默认的_Layout.cshtml： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>izigo Conference - Gestor de Conteúdos</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <section id="login"> @Html.Partial(MVC.Account.Views._LoginPartial) </section> <div style="padding: 10px;"> @if (Request.IsAuthenticated) { <nav> <ul id="menu"> <li>@Html.ActionLink("Home", MVC.Home.Index())</li> <li>@Html.ActionLink("Participantes", MVC.Attendee.Index())</li> <li>@Html.ActionLink("Check-in", MVC.Checkin.Index())</li> </ul> </nav> } </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer style="padding-left: 25px;"> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - <a href="https://www.izigo.pt/conference" target="_blank">izigo Conference</a> - <i>Powered by</i><a href="https://www.izigo.pt" target="_blank">izigo.pt</a></p> </div> </div> </footer> @Scripts.Render("~/bundles/jquery", "~/bundles/iziconference") @RenderSection("scripts", required: false) </body> </html> 研究了 dataTables 库的选项后，我找到了一个创建响应式解决方案的选项： 我已经包含了响应表结构和columnDefs的选项，以选择哪些选项在移动设备中保持可见： $("#" + _atteendeesList).DataTable({ "responsive": true, "columnDefs": [ { responsivePriority: 1, targets: 0 }, { responsivePriority: 2, targets: -1 } ], "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 我还必须在捆绑包中包含数据表扩展的 js 和 css 响应式库（可在此处下载：https://datatables.net/download/）： bundles.Add(new ScriptBundle("~/bundles/iziconference").Include( "~/Content/Scripts/datatables.min.js", "~/Content/Scripts/dataTables.responsive.min.js")); // add-on bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/Styles/datatables.min.css", "~/Content/Styles/responsive.dataTables.min.css"));
.navbar { 背景颜色：#F91F46； } .src-bar { 边框：0； 边框半径：5px； 概要：无； 左内边距：15px； 宽度：30vw； } .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="img/Logo.avif" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <div class="justify-content-end"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </div> </nav> 切换时，我希望折叠 div 居中。我知道原因 - 我将折叠和切换 btn 放在 justify-end div 内，因为我需要切换 btn 位置位于右侧。现在，当切换时，我的折叠位于右侧，但我希望在切换时，折叠div到中心。 当我删除 justify-end div 时，它位于左侧，但如果删除它，每个导航元素都会移动到 nav 和 md 视图中 lg 的左侧。 看起来像这样或中心 我们确实需要将 .nav-collapse 移到 justify-end 元素之外，才能在较窄的视口上获得所需的布局。 要将菜单显示在右侧，请通过 flex-grow: 1 类将 .nav-collapse 应用于 flex-grow: 0 元素，覆盖 flex-grow-0 上的默认 .nav-collapse。 为了使窄视口的链接元素居中，.navbar-nav中的元素采用垂直柔性布局，因此我们可以通过align-items: center类应用align-items-center： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> 您还可以考虑通过 text-align: center 类应用 text-center，将链接元素 text 居中： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav>
我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象： </sc...</desc> <question vote="0"> <p>我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> <head> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <title>Gauge Chart</title> </head> <button id='btn1'> Let's </button> <input id='slider1' type='range' value='34' min='0' max='100' step='.01'> <input id='slider2' type='range' value='89' min='0' max='100' step='.01'> <div id='chartid1' style='width:390px; height: 410px;'></div> <script> const chart1 = echarts.init(document.getElementById('chartid1')); function update1(value1, value2) { option = { series: [{ type: 'gauge', min: 0, max: 100, splitNumber: 10, detail: { fontFamily: 'Lato', fontSize: 14, borderWidth: 1, borderColor: '#020202', borderRadius: 5, width: 32, height: 20 }, data: [{ value: value1, name: 'False', itemStyle: { color: '#dd4b50' }, title: { offsetCenter: ['-20%', '20%'] }, detail: { offsetCenter: ['-20%', '36%'], backgroundColor: '#dd4b50', color: '#f2f2f2' } }, { value: value2, name: 'True', itemStyle: { color: '#3a9e4b' }, title: { offsetCenter: ['20%', '20%'] }, detail: { offsetCenter: ['20%', '36%'], color: '#f2f2f2', backgroundColor: '#3a9e4b' } } ] }] }; chart1.setOption(option); } function update2() { let value1 = Number($('#slider1').val()); let value2 = Number($("#slider2").val()); update1(value1, value2); } update2(); document.getElementById('btn1').addEventListener('click', function() { update2(); }) /// clickable chart1.on('mouseenter', {dataIndex:0}, function(params) { $(this).popover({ html: true, sanitize: false, title: 'Title ', content: 'This a text', trigger: 'hover', placement: 'top', container: 'body' }) }) </script></code></pre> </div> </div> <p></p> <p>我需要悬停并获得 .popover。我知道我可以使用 <pre><code>tooltip:{...}</code></pre>，但对于特定情况，我需要配置 .popover。我尝试用 <pre><code>mychart1.on(...</code></pre> 调整上面的代码，但没有成功。我添加了所有代码需求的CDN。</p> </question> <answer tick="false" vote="0"> <p>如果您查看 <a href="https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover" rel="nofollow noreferrer">文档</a>，该事件称为 <pre><code>mouseover</code></pre>，而不是 <pre><code>mouseenter</code></pre>。 <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5AOYCGAri1kwDRUUAthGjEADP2rpBbAB7EAjGIkD0GEABsIYAHIdBAI1yKVU2ABMsYNhA3FUZ9ADMYYAGJthG2swAybMGA-VQoXaDAAZQgAL0ZYBQAWSUcDYBxLHAB1CHMwAAtFZLNU9NwAYWANNOYAYjEAJgaG4MdYEoyAJTZzCA4iWABWIqkAdxz84gBmeuHqPKwIFjywYkaQgF9ZiwC2YjJWh1bYADc2DQ44yaSQ6mhPOKYPDWwWo-0sQQi6DTjDo9gAMaVaqwJg1czmBIGAZiJg3CibeHoSBgH72JEUYBOJzYMBlLDhYykJgAWkaAFI-KCKUwALoYxH_SzWWzo_7oLE4qz4wk4Pakmm8UGTABslNpW2KbABAGsWDhgBxoOYKlU-aDwZDobDJVIgWrak56kajXD_ut4YzHH9HKdznEABwATl16DuggeABUcBdXq13p9vr8Meh9SCwZM2E6sFCzUcra0UWjKOzYJzcTywESSExBdSxOKGa6LFYbHYU-z09yCVn1Tm80xReLi6HgeqwSbjfU_UcDNK5QqlSq27VI9HYwzLSF6dQLeh6esANwoFeCWhlPJsHBgAB0MAAFExBIrsMBjrgqUhzDsAJLKrDyWBiTawJxKgGQA8gLeeDAASgrIFoAwSosB3KoWH3b8cF_P9l3WOCgA" rel="nofollow noreferrer">这里</a>是你的例子：</p> <pre><code>option = { series: [ { type: 'gauge', min: 0, max: 100, splitNumber: 10, detail: { fontFamily: 'Lato', fontSize: 14, borderWidth: 1, borderColor: '#020202', borderRadius: 5, width: 32, height: 20 }, data: [ { value: 34, name: 'False', itemStyle: { color: '#dd4b50' }, title: { offsetCenter: ['-20%', '20%'] }, detail: { offsetCenter: ['-20%', '36%'], backgroundColor: '#dd4b50', color: '#f2f2f2' } }, { value: 89, name: 'True', itemStyle: { color: '#3a9e4b' }, title: { offsetCenter: ['20%', '20%'] }, detail: { offsetCenter: ['20%', '36%'], color: '#f2f2f2', backgroundColor: '#3a9e4b' } } ] } ] }; myChart.on('mouseover', {dataIndex: 0}, function(params) { console.log(params); }); </code></pre> </answer> </body></html>
ML.net - CreateTimeSeriesEngine
我正在使用 ML.net 进行时间序列分析项目。在这里我尝试预测欧元兑美元的交易汇率。我从 CSV 文件加载数据并使用内存数据创建 IDataView。 列表 我正在使用 ML.net 进行时间序列分析项目。在这里我尝试预测欧元兑美元的交易汇率。我从 CSV 文件加载数据并使用内存数据创建 IDataView。 List<RateData> infoList = new List<RateData>(); // populate list infoList = FileParser(infoList); IDataView data = mlContext.Data.LoadFromEnumerable<RateData>(infoList); 我设法像这样运行预测估计器 var forecastEstimator = mlContext.Forecasting.ForecastBySsa( outputColumnName: nameof(RatePrediction.CurrentRate), inputColumnName: nameof(RateData.HistoricalRate), windowSize: 14, seriesLength: numRateDataPoints, trainSize: numRateDataPoints, horizon: 1, confidenceLevel: 0.95f ); SsaForecastingTransformer forecaster = forecastEstimator.Fit(RateDataSeries); 然后我尝试创建这样的预测引擎 var ForecastEngine = Forecaster.CreateTimeSeriesEngine(mlContext); 这里我遇到了一些错误。 我的输入和输出类如下： public class RateData { public DateTime TransactionDate { get; set; } public float HistoricalRate { get; set; } } public class RatePrediction { public float CurrentRate; } 我有这样的错误 System.InvalidOperationException: Can't bind the IDataView column 'CurrentRate' of type 'Vector<Single, 1>' to field or property 'CurrentRate' of type 'System.Single'. at Microsoft.ML.Data.TypedCursorable`1..ctor(IHostEnvironment env, IDataView data, Boolean ignoreMissingColumns, InternalSchemaDefinition schemaDefn) at Microsoft.ML.Data.TypedCursorable`1.Create(IHostEnvironment env, IDataView data, Boolean ignoreMissingColumns, SchemaDefinition schemaDefinition) at Microsoft.ML.Transforms.TimeSeries.TimeSeriesPredictionEngine`2.PredictionEngineCore(IHostEnvironment env, InputRow`1 inputRow, IRowToRowMapper mapper, Boolean ignoreMissingColumns, SchemaDefinition outputSchemaDefinition, Action& disposer, IRowReadableAs`1& outputRow) at Microsoft.ML.PredictionEngineBase`2..ctor(IHostEnvironment env, ITransformer transformer, Boolean ignoreMissingColumns, SchemaDefinition inputSchemaDefinition, SchemaDefinition outputSchemaDefinition, Boolean ownsTransformer) at Microsoft.ML.Transforms.TimeSeries.TimeSeriesPredictionEngine`2..ctor(IHostEnvironment env, ITransformer transformer, Boolean ignoreMissingColumns, SchemaDefinition inputSchemaDefinition, SchemaDefinition outputSchemaDefinition) at Microsoft.ML.Transforms.TimeSeries.PredictionFunctionExtensions.CreateTimeSeriesEngine[TSrc,TDst](ITransformer transformer, IHostEnvironment env, Boolean ignoreMissingColumns, SchemaDefinition inputSchemaDefinition, SchemaDefinition outputSchemaDefinition) at USD_EURO_Conversion_rate.TimeSeriesModelHelper.FitAndSaveModel(MLContext mlContext, IDataView RateDataSeries, String outputModelPath) 预测类中的属性需要是float[]类型；向量/数组而不是单个值，例如 public class RatePrediction { public float[] CurrentRate; } 类似于此处的Microsoft 示例。
构建了一个小费计算器，但希望通过获取正在单击的按钮的innerHTML来缩短代码。 账单总额： 构建了一个小费计算器，但想通过获取正在单击的按钮的innerHTML来缩短代码。 Total Bill: <input id="bill" type="text"> <button type="button" onclick="tip15()">15</button> <button type="button" onclick="tip18()">18</button> <button type="button" onclick="tip20()">20</button> <div id="tip">You owe...</div> function tip15(){ var totalBill = document.getElementById("bill").value; var totalTip = document.onclick.innerHTML var tip = totalBill * 0.15; document.getElementById("tip").innerHTML = "$" +tip } 这种方法的问题是我必须写出三个版本的函数来与小费金额相对应。我想创建一个函数来获取被单击按钮的innerHTML 并在函数中使用该值。我希望它看起来像这样 function tip(){ var totalBill = document.getElementById("bill").value; **var totalTip = GET INNERHTML OF CLICKED BUTTON** var tip = totalBill * ("." + totalTip); document.getElementById("tip").innerHTML = "$" +tip } 这样我就可以在不同的按钮上运行相同的功能。 使用 HTML5 数据属性。 <button type="button" data-tip="15" onclick="getTip(this)">15</button> 您传递给函数的参数this指的是正在单击的按钮。然后你就可以得到这样的属性值： function tip(button){ var tip= button.getAttribute("data-tip"); ... } 剩下的留给你了。 像这样改变：将值传递给tip函数。 <button id="15" type="button" onclick="tip(15)">15</button> <button id="18" type="button" onclick="tip(18)">18</button> <button id="20" type="button" onclick="tip(20)">20</button> function tip(tip_value) { /*use here tip_value as you wish you can use if condition to check the value here*/ var totalBill = document.getElementById("bill").value; var totalTip = tip_value; var tip = totalBill * ("." + totalTip); document.getElementById("tip").innerHTML = "$" +tip; } 将 this.innerHTML 作为参数传递给您的小费函数。 所以你的小费函数应该是这样的： function tip(totalTip) { var totalBill = document.getElementById("bill").value; var tip = totalBill * ("." + totalTip); document.getElementById("tip").innerHTML = "$" +tip } 因此，如果您有一个如下所示的按钮元素： <button type="button" onclick="tip(this.innerHTML)">15</button> 提示函数将被称为 tip(15)。 我会写一个快速解决方案，然后解释为什么我这样做。 建议的解决方案 第 1 部分，HTML <div id="tip-wrapper"> <label for="bill">Total bill:</label> <input name="bill" id="bill" type="text"> <br/> <label for="tipratio">Tip ratio:</label> <button name="tipratio" value="15" type="button">15%</button> <button name="tipratio" value="18" type="button">18%</button> <button name="tipratio" value="20" type="button">20%</button> <div id="final-value">You owe...</div> </div> 第 2 部分，JavaScript var parent = document.getElementById('tip-wrapper'), buttons = parent.getElementsByTagName('button'), max = buttons.length, i; // function that handles stuff function calculate (e) { var bill = document.getElementById('bill'), tipRatio = e.target.value; document.getElementById('final-value').textContent = bill.value * (1+tipRatio/100); } // append event listeners to each button for(i = 0; i < max; i++) { buttons[i].addEventListener('click', calculate, true); } 说明 关于 HTML，并没有“太多”改变。唯一的事情是我使用的东西更符合标准。 我添加了一个 wrapper 元素，这只是为了隔离一些 DOM 遍历，而不是遍历整个文档对象来进行查找（这将加快您的脚本速度）。 您的按钮使用“值”属性，这是最好的。因为您可以以一种方式显示按钮文本，但使用正确的值（请参阅我添加了 % 字符）。 除此之外，我主要添加了适当的标识符和标签。 JavaScript，这是我将更详细地介绍的地方，我将逐步介绍： 您在脚本中要做的第一件事是设置您需要的变量（并获取您将使用的 DOM 元素。这就是我在前 4 行代码中所做的事情。 创建一个通用函数来处理您的计算并更新您的元素，无论其数值如何。我在这里使用的功能是向您的函数添加一个参数 (e)，因为 javascript 中的 EVENTS 将 EVENT OBJECT 附加到您的回调函数（在本例中为 calculate();）。 EVENT OBJECT 实际上有很多有用的属性，我使用其中的： target：这是触发事件的元素（即您的按钮之一） 我们所要做的就是获取目标值 (e.target.value) 并将其用于返回最终账单的数学中。 使用addEventListener。人们普遍认为应该将 JavaScript 保留在 HTML 之外，因此不鼓励使用旧的事件方法 (onclick="")。 addEventListener()方法并不太复杂，不做详细介绍，其工作原理如下： htmlObject.addEventListener('事件类型', '回调函数', '冒泡true/false'); 我所做的只是循环遍历所有按钮并附加事件 lsitener。 结束语 使用此脚本，您现在可以添加任何您想要的“按钮”，脚本会将它们全部考虑在内并进行相应调整。只要确保设置它们的“值”即可。 当我写这篇文章时，一些人给出了一些快速的答案。我还不能发表评论（声誉低），所以我会在这里留下我的评论。 一些建议的答案告诉您使用innerHTML来获取小费值。这是错误的，您正在使用表单字段，应该使用 element.value，这就是它的用途。 有些人甚至敢说使用 HTML5 data-* 属性。当然，你可以。但你为什么要这么做呢？ HTML 和 DOM 已经提供了完成任务所需的所有工具，而无需使用不必要的属性来污染 HTML。 value="" 属性旨在在表单中使用，它应该在字段值的 data-* 属性上使用。 一般来说，innerHTML旨在获取 HTML，而不一定是文本或值。还有其他方法可以获取您正在寻找的值。对于表单元素，它是 element.value，对于大多数其他 HTML 元素，它是 element.textContent。 希望这些解释有帮助 function tip(o) { var input = document.querySelector("input[id='bill']"); var total = input.value * o.innerHTML; document.querySelector("#tip").innerHTML = "$" + total; } Total Bill: <input id="bill" type="text"> <button type="button" onclick="tip(this)">15</button> <button type="button" onclick="tip(this)">18</button> <button type="button" onclick="tip(this)">20</button> <div id="tip">You owe...</div> 嘿我最近找到了解决这个问题的简单方法： 您可以将内部文本作为元素的 id 提供。在事件处理程序中，您可以通过以下方式访问内部文本： e.目标.id 希望这个解决方案可以帮助您:)
表单响应：“无法处理请求 HTTP ERROR 500”。我做错了什么？
我尝试在网站上编写 php 表单，但收到错误 500。我无法弄清楚我做错了什么。你能看一下代码看看我做错了什么吗？ PHP： 我尝试在网站上编写 php 表单，但收到错误 500。我无法弄清楚我做错了什么。你能看一下代码看看我做错了什么吗？ PHP： <?php // define variables and set to empty values $name = $email = $phone = $enquiry = ""; if ( $_SERVER[ "REQUEST_METHOD" ] == "POST" ) { if ( empty( $_POST[ "name" ] ) ) { $nameErr = "Name is required"; } else { $name = test_input( $_POST[ "name" ] ); // check if name only contains letters and whitespace if ( !preg_match( "/^[a-zA-Z-' ]*$/", $name ) ) { $nameErr = "Only letters and white space allowed"; } } if ( empty( $_POST[ "email" ] ) ) { $emailErr = "Email is required"; } else { $email = test_input( $_POST[ "email" ] ); // check if e-mail address is well-formed if ( !filter_var( $email, FILTER_VALIDATE_EMAIL ) ) { $emailErr = "Invalid email format"; } } if ( empty( $_POST[ "phone" ] ) ) { $comment = ""; } else { $comment = test_input( $_POST[ "phone" ] ); } if ( empty( $_POST[ "enquiry" ] ) ) { $comment = ""; } else { $comment = test_input( $_POST[ "enquiry" ] ); } } // Create the email and send the message $destination = "[email protected]"; $subject = "Website Contact Form Enquiry: $name"; $body = "You have received a new message from your website contact form.\\n\\n"."Here are the details:\\n\\nName: $name\\n\\nEmail: $email\\n\\nPhone: $phone\\n\\nEnquiry:\\n$enquiry"; $header = "From: [email protected]\\n"; $headers = array(); $headers[] = "MIME-Version: 1.0"; $headers[] = "Content-type: text/plain; charset=iso-8859-1"; $headers[] = "From: " . $fromAddress; $headers[] = "Subject: " . $subject; $headers[] = "X-Mailer: PHP/".phpversion(); mail($destination, $subject, $message, implode("\r\n", $headers)); // mail($to,$subject,$msg,$headers); echo "Email successfully sent."; ?> HTML 格式： <form id="contact-form" method="post" action="/contact.php" role="form"> <div class="messages"></div> <div class="controls"> <div class="row"> <div class="col-md-10"> <div class="form-group"> <input id="form_name" type="text" name="name" class="form-control" placeholder="Name*" required="required" data-error="Your name is required." > <div class="help-block with-errors"></div> </div> </div> <div class="col-md-10"> <div class="form-group"> <input id="form_email" type="email" name="email" class="form-control" placeholder="Email*" required="required" data-error="Valid email is required." > <div class="help-block with-errors"></div> </div> </div> <div class="col-md-10"> <div class="form-group"> <input id="form_phone" type="text" name="phone" class="form-control" placeholder="Phone" > <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-10"> <div class="form-group"> <textarea id="form_enquiry" name="enquiry" class="form-control" placeholder="Enquiry*" rows="6" required="required" data-error="Please, leave us a message."></textarea> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <input class="btn btn-large btn-primary centre mt-10" type="submit" value="Submit" > </div> </div> </div> </form> 我已按照其他人的指示使表单正常工作，但所做的更改仍然会出现错误。 这是一个简单的形式，但我似乎对我做错了什么缺乏了解。 请帮助我。 如果您查看发送邮件的行，这是一个硬行结尾，将 $headers 推到新行上吗？这将调用 500 错误。 查看 /var/log/apache2/error.log（如果您使用的是 Debian）或 /var/log/httpd/error.log（如果使用的是 RHEL 或类似系统）。 您的代码存在许多问题，但首先关注快乐的道路，然后让事情正常运行。
NextJS 中 useFormStatus() 始终为 false
我尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。 我有一个像这样的表单组件 函数 onSubmit(数据：z.infer 我正在尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。 我有一个像这样的表单组件 function onSubmit(data: z.infer<typeof FormSchema>) { requestImg(data).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setOpen(true); setSource(imageBase64); }); } if (isDesktop) { return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6" > ... 其中 requestImg(data) 是服务器操作。 然后，我将 Button 组件嵌套在不同的 Button.tsx 文件中的 <form> 中 import { useFormStatus } from "react-dom"; import { Button } from "@/components/ui/button"; export default function ButtonSub() { const { pending } = useFormStatus(); console.log(pending); return ( <Button className="w-full" type="submit" aria-disabled={pending}> {pending ? "Processing..." : "Submit"} </Button> ); } 问题是，当我单击提交时，按钮文本不会更改为“正在处理...” 编辑 似乎仅当您在表单上使用操作关键字时才有效。我试过了 <form action={async (formData: FormData) => { requestImg(formData).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setSource(imageBase64); setOpen(true); }); }} className="w-2/3 space-y-6" > 但是现在使用 byte8Array 生成的图像已损坏。 我有一个带有动态 src 的图像，其中充满了 const [source, setSource] = useState(""); <img src={source}/> 似乎只有在您使用 action 关键字时才有效 形式。 确实如此。 useFormStatus 必须在表单的子组件内使用，它可以监视服务器操作的状态变化。但据我所知，它会监听 action。 action 定义提交后表单数据的服务器端目的地。在服务器操作的上下文中，服务器操作向当前 URL 发出 post 请求。所以它没有监听表单 onSubmit，这就是为什么你的第一个代码执行不起作用。 现在服务器操作在服务器上下文中运行，它们在服务器上执行，但setState是客户端特定的代码
从数据库中选择 SELECT 选项后如何显示/隐藏 DIV？
这是选择选项的代码； 这是选择选项的代码； <div class="modal-body row"> <form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data"> <div class="form-group col-md-6"> <label for="exampleInputEmail1"><?php echo lang('categorie'); ?></label> <select class="form-control m-bot15" name="categorie" value='' id="p_category"> <option value="#"> Sélectionner catégorie</option> <?php foreach ($categories as $category) { ?> <option value="category"><?php if (!empty($setval)) { if ($category->category == set_value('category')) { echo 'selected'; } } if (!empty($patient->category)) { if ($category->category == $patient->category) { echo 'selected'; } } ?> > <?php echo $category->category; ?> </option> <?php } ?> </select> </div> 这是必须显示/隐藏的 div： <label for="exampleInputEmail1"><?php echo lang('name_Us'); ?></label> <input type="text" class="form-control" name="name_husband" id="nameUs" placeholder=""> <label for="exampleInputEmail1"><?php echo lang('number_pre'); ?></label> <input type="number" class="form-control" name="number_pre" id="nbreEnf" placeholder=""> </div> 这是 JavaScript 代码： $('.divUs').hide(); $(document.body).on('change', '#p_category', function () { var v = $("select.p_category option:selected").val() if (v == 'Fe_Ence') { $('.divUs').show(); } else { $('.divUs').hide(); } }); }); 我希望如果选择了元素（Fe_Ence），则可以显示 div，否则，它保持隐藏 例如，您可以使用 :has 选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="thingtohide"> <h1>Hello</h1> </div> <div id="checkbox"> <input type="checkbox"> </div> <style> body:has(#checkbox input:checked) #thingtohide { visibility: hidden; } </style> </body> </html> 因此，如果父元素有一个选中的复选框，那么您可以定位与该父元素不同的子元素。
嵌套 useFetch 导致 Nuxt 3 中的 Hydration 节点不匹配
在 Nuxt 3 页面内，我通过从 pinia 存储调用操作来获取帖子数据： {{ 发布数据 }} {{ 帖子内容... 在 Nuxt 3 页面内，我通过从 pinia 商店调用操作来获取帖子数据： <template> <div v-if="postData && postContent"> {{ postData }} {{ postContent }} </div> </template> <script setup> const config = useRuntimeConfig() const route = useRoute() const slug = route.params.slug const url = config.public.wpApiUrl const contentStore = useContentStore() await contentStore.fetchPostData({ url, slug }) const postData = contentStore.postData const postContent = contentStore.postContent </script> 那是我的商店： import { defineStore } from 'pinia' export const useContentStore = defineStore('content',{ state: () => ({ postData: null, postContent: null }), actions: { async fetchPostData({ url, slug }) { try { const { data: postData, error } = await useFetch(`${url}/wp/v2/posts`, { query: { slug: slug }, transform(data) { return data.map((post) => ({ id: post.id, title: post.title.rendered, content: post.content.rendered, excerpt: post.excerpt.rendered, date: post.date, slug: post.slug, })); } }) this.postData = postData.value; if (postData && postData.value && postData.value.length && postData.value[0].id) { const {data: postContent} = await useFetch(`${url}/rl/v1/get?id=${postData.value[0].id}`, { method: 'POST', }); this.postContent = postContent.value; } } catch (error) { console.error('Error fetching post data:', error) } } } }); 浏览器中的输出正常，但我在浏览器控制台中收到以下错误： entry.js:54 [Vue warn]: Hydration node mismatch: - rendered on server: <!----> - expected on client: div at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <Anonymous key="/news/hello-world()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/news/hello-world', hash: '', query: {…}, name: 'news-slug', path: '/news/hello-world', …} ... > at <RouterView name=undefined route=undefined > at <NuxtPage> at <Default ref=Ref< undefined > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at <NuxtLayout> at <App key=3 > at <NuxtRoot> 如何解决这个问题？ 我尝试在 onMounted 中获取帖子数据，但在这种情况下 postData 和 postContent 保持为空 onMounted(async () => { await contentStore.fetchPostData({ url, slug }) }) 您可以使用 ClientOnly 组件来消除该警告。请参阅文档了解更多信息。 该组件仅在客户端渲染其插槽。
我刚刚开始学习 html 所以我想尝试使用 download 属性 我刚刚开始学习 html，所以我想尝试使用下载属性 <a href="../images/clunk.jfif" download="ur_mum"> <img src="../images/clunk.jfif" alt="ur mum" width="200" height="200"> </a> 图像存储在同一个网站上，但是当我单击它而不是下载时，它只会使图像全屏显示。 我尝试尽可能地排除故障，但没有成功 我能找到的关于为什么某些文件类型发生这种情况但并非所有文件类型的原因是这个答案关于pdf下载与预览的类似问题 - 如果可以的话，请将以下标头添加到服务器端的图像响应中： Content-Disposition: attachment; filename=clunk.jfif 或者，您可以使用自定义 onclick 处理程序替换锚标记，该处理程序将图像转换为数据 URL 并触发下载： <img src="../images/clunk.jfif" width="200" height="200" onclick="downloadImage(this)"> const downloadImage = async (img) => { // fetch the image's media type const mediaType = fetch(img.currentSrc, { method: 'HEAD' }) .then(res => res.headers.get('content-type')) .catch(() => 'image/png' /* default to png if request fails */) // place the image on a canvas element const canv = Object.assign(document.createElement('canvas'), { width: img.naturalWidth, height: img.naturalHeight, }) const ctx = canv.getContext('2d') ctx.drawImage(img, 0, 0) // download the canvas data const a = Object.assign(document.createElement('a'), { download: 'filename', href: canv.toDataURL(await mediaType), }) a.click() }
是否可以在网页中嵌入 TypeScript 代码？我想将 TypeScript 代码嵌入到脚本标签中，如下所示（以便它自动编译为 Javascript）： <p>是否可以在网页中嵌入 TypeScript 代码？我想将 TypeScript 代码嵌入到脚本标签中，如下所示（以便它自动编译为 Javascript）：</p> <pre><code><script type = "text/typescript"> //TypeScript code goes here </script> </code></pre> </question> <answer tick="true" vote="28"> <p>实际上有几个项目允许您使用类似的 TypeScript 代码 - <a href="https://github.com/niutech/typescript-compile" rel="noreferrer">TypeScript Compile</a>、<a href="https://github.com/ComFreek/ts-htaccess" rel="noreferrer">ts-htaccess</a>。</p> <p>这里的问题是 .ts 代码应该编译成 JavaScript - 它可以在客户端完成（速度慢；整个 TSC 也应该加载到客户端）或在服务器端完成（显然更快，而且它更快）在编译代码上利用缓存要容易得多）。</p> </answer> <answer tick="false" vote="18"> <p>这是我编写的版本，<strong>直接</strong>使用 Microsoft/TypeScript/master 的版本，因此它始终保持最新：<a href="https://github.com/basarat/typescript-script" rel="noreferrer">https://github.com/basarat/typescript-script</a></p> <p>您甚至可以将 <pre><code>ts</code></pre> 指向您可能拥有的任何其他 TypeScript 版本，它会正常工作 🌹</p> </answer> <answer tick="false" vote="6"> <p>已经为此目的开发了一个 JavaScript 库 - 它称为 <a href="https://github.com/niutech/typescript-compile" rel="noreferrer">TypeScript Compile</a>，它允许将 Typescript 嵌入到 HTML 中（如上所示。）</p> </answer> <answer tick="false" vote="0"> <p>我写这篇文章的目的是为了在浏览器中编译 TypeScript，以便我可以编写快速简单的示例来分享。</p> <p><a href="https://github.com/Sean-Bradley/text-typescript" rel="nofollow noreferrer">https://github.com/Sean-Bradley/text-typescript</a></p> <p>使用，</p> <pre><code><script type="text/typescript"> // Your TypeScript code here </script> </code></pre> <p>并包含依赖项。</p> <pre><code><script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="67131e17021404150e1713275249544954">[email protected]</a>"></script> <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="3743524f431a434e47524454455e4743770619041907">[email protected]</a>"></script> </code></pre> <p>一个完整的示例，您可以复制/粘贴到 HTML 文档中并在本地尝试。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>"text/typescript" example</title> <meta name="description" content="Transpiling and executing TypeScript in the browser" /> <style> body { overflow: hidden; margin: 0px; font-size: 15vw; } </style> <script type="text/typescript"> function foo(bar: string) { return "Hello " + bar; } let baz = "World!"; document.getElementById("root").innerHTML = foo(baz); </script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="13676a63766070617a636753263d203d20">[email protected]</a>"></script> <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="ec98899498c198959c899f8f9e859c98acddc2dfc2dc">[email protected]</a>"></script> </head> <body> <div id="root"></div> </body> </html> </code></pre> <p>你可以看到它在这里、现在、今天发挥作用。</p> <p><a href="https://editor.sbcode.net/f1f4b5a73ec40283d1ddb37bb1e71f7e4e31b487" rel="nofollow noreferrer">https://editor.sbcode.net/f1f4b5a73ec40283d1ddb37bb1e71f7e4e31b487</a></p> </answer> </body></html>
将 localstack 与 Spring Cloud AWS 2.3 一起使用时出现未知主机
“ResourceLoader”与 AWS S3 可以很好地处理这些属性： 云： 亚马逊： s3: 端点：s3.amazonaws.com <-- custom endpoint added in spring cloud aws 2.3 creden...
我有一个包含以下内容的html字符串： 我有一个包含以下内容的html字符串： <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="spanish press" content="spain, spanish newspaper, news,economy,politics,sports"> <title></title> </head> <body id="body"> <!-- The following code will render a clickable image ad in the page --> <script src="http://www.myscript.com/a"></script> </body> </html> 我需要将该网站显示到 Android 中的网络视图中。 我尝试过这一切： webView.loadDataWithBaseURL(null, txt, "text/html", "UTF-8", null); webView.loadDataWithBaseURL("x-data://base", txt, "text/html", "UTF-8", null); webView.loadDataWithBaseURL("notreal/", txt, "text/htm", "utf-8",null); 我还尝试删除 DOCTYPE 标签： txt=txt.replace("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">", ""); 这些人都没有工作。我刚刚实现了将字符串显示到 webview（html 代码）中，但不是必须使用该 html 代码创建的网站。 出了什么问题？ 在 WebView 中加载数据。调用WebView的loadData()方法 wv.loadData(yourData, "text/html", "UTF-8"); 你可以查看这个例子 http://developer.android.com/reference/android/webkit/WebView.html [编辑1] 您应该在 -- " 之前添加 -- \ -- 例如 --> name=\"spanish press\" 下面的字符串对我有用 String webData = "<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " + "content=\"text/html; charset=utf-8\"> <html><head><meta http-equiv=\"content-type\" content=\"text/html; charset=windows-1250\">"+ "<meta name=\"spanish press\" content=\"spain, spanish newspaper, news,economy,politics,sports\"><title></title></head><body id=\"body\">"+ "<script src=\"http://www.myscript.com/a\"></script>şlkasşldkasşdksaşdkaşskdşk</body></html>"; 你也可以试试这个 final WebView webView = new WebView(this); webView.loadDataWithBaseURL(null, content, "text/html", "UTF-8", null); 从资产 html 文件中读取 ViewGroup webGroup; String content = readContent("content/ganji.html"); final WebView webView = new WebView(this); webView.loadDataWithBaseURL(null, content, "text/html", "UTF-8", null); webGroup.addView(webView); 我有同样的要求，我是按照以下方式完成的。你也可以试试这个。 使用loadData方法 web.loadData(""" <p style='text-align:center'> <img class='aligncenter size-full wp-image-1607' title='' src="+movImage+" alt='' width='240px' height='180px' /> </p> <p> <center> <U> <H2>"+movName+"("+movYear+")</H2> </U> </center> </p> <p><strong>Director : </strong>"+movDirector+"</p> <p><strong>Producer : </strong>"+movProducer+"</p> <p><strong>Character : </strong>"+movActedAs+"</p> <p><strong>Summary : </strong>"+movAnecdotes+"</p> <p><strong>Synopsis : </strong>"+movSynopsis+"</p> """, "text/html", "UTF-8" ); movDirector movProducer 都是我的字符串变量。 简而言之，我保留了 URL 的自定义样式。 如果您正在 JetpackCompose 中寻找某些内容，这可以帮助您： @Composable fun HtmlTextVisualizerComponent(textFromData: String) { val mimeType = "text/html" val encoding = "UTF-8" LazyColumn( modifier = Modifier .padding( start = 24.dp, end = 24.dp, top = 16.dp, bottom = 24.dp, ), ) { items(1) { val state = rememberWebViewState( url = "data:$mimeType;$encoding,$textFromData", ) val navigator = rememberWebViewNavigator() WebView( state = state, modifier = Modifier.fillMaxSize(), navigator = navigator, onCreated = { it.settings.javaScriptEnabled = true }, ) } } } 一定不要忘记在你的 gradle 中添加依赖项： implementation "com.google.accompanist:accompanist-webview:0.30.1"
所以我有一张垫子桌 所以我有一张垫子桌 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.name"> <mat-header-cell *matHeaderCellDef cdkDrag dkDragLockAxis="x" cdkDragBoundary="mat-header-row"> {{ column.title }} </mat-header-cell> <mat-cell *matCellDef="let element"> {{ element[column.name] }} </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table> 但我需要在表标题下为相应的行过滤器添加一行。我尝试在标题和实际行声明之间添加 <mat-row> ，但是由于过滤器是不同的输入（例如数字、自动完成选择和多选），我无法 *ngFor 它们（而且我不是当然我是否能够） 编辑：忘记发布过滤器 HTML <div class="filterGroup"> <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter za param1" formControlName="filterParam1"> </mat-form-field> <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter za param2" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter za param3" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </div> 以及相关组件.ts tableDisplayedColumns: string[] = ['param1', 'param2', 'param3']; columns: any[] = [ { name: 'param1', title: 'Param1' }, { name: 'param2', title: 'Param2' }, { name: 'param3', title: 'Param3' } ]; 为了解决这个问题，我设法通过删除 *ngFor 并手动放入过滤器来做到这一点。 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container matColumnDef="param1"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param1 <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam1"> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param1}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param2"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param2 <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param2}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param3"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param3 <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param3}}</span> </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table>
我正在使用 Express、EJS 和 bootstrap 制作一个网站，但下拉按钮不起作用 代码： <%- include('../includes/head') %> 我正在使用 Express、EJS 和 bootstrap 制作一个网站，但下拉按钮不起作用 代码： <%- include('../includes/head') %> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> <%- include('../includes/footer') %> 头： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <title>Title</title> </head> <body> 页脚： <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html> 当我单击按钮时，它不显示下拉菜单的内容 我不知道这是否重要/有效，但尝试将引导脚本从页脚移动到页眉，它可能基于加载顺序。
如何使用 JS 延迟加载新的 Google Adsense 代码
谷歌已取代 <question vote="1"> <p>谷歌已取代 <br/></p> <p><pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</script></code></pre> <br/></p> <p>与<br/></p> <p><pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"</script></code></pre> <br/></p> <p><strong>参考</strong>：<a href="https://support.google.com/adsense/answer/10627874" rel="nofollow noreferrer">Google Adsense 公告</a><br/></p> <p><strong>旧的 Adsense 代码就像：</strong></p> <pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:350px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </code></pre> <p><strong>新的 Adsense 代码如下：</strong></p> <pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:350px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </code></pre> <p><strong>页面加载完成后加载广告的旧 JS 代码是：</strong></p> <pre><code> <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </code></pre> <p>由于在新广告代码的脚本标签中添加了<pre><code>?client=ca-pub-xxxxxx" crossorigin="anonymous"</code></pre>，那么现在加载广告的新JS代码是什么？</p> </question> <answer tick="true" vote="1"> <p>嗯，这并不是真正的延迟加载，这是延迟加载，不推荐，但你就可以了</p> <pre><code><script> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"; element.async = true; element.setAttribute('crossorigin', 'anonymous'); document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </code></pre> <p>如果您正在寻找延迟加载 AdSense，请查看 <a href="https://www.guest.blog/post/12068/lazy-loading-adsense-ads/" rel="nofollow noreferrer">延迟加载 Adsense</a></p> </answer> <answer tick="false" vote="0"> <blockquote> <h2>引用的标题##<script async</h2> <p>src="https://pagead2.googlesyndicate.com/pagead/js/adsbygoogle.js?client=ca-pub-1049121221402917" 跨桥=“匿名”></p> </blockquote> </answer> </body></html>
我尝试从 Google 获取我的 GCM 注册 ID。 我的代码： 字符串SENDER_ID =“722*****53”; /** * 向 GCM 服务器异步注册应用程序。 * * 存储注册信息... 我尝试从 Google 获取我的 GCM 注册 ID。 我的代码： String SENDER_ID = "722******53"; /** * Registers the application with GCM servers asynchronously. * <p> * Stores the registration ID and the app versionCode in the application's * shared preferences. */ private void registerInBackground() { new AsyncTask<Void, Void, String>() { @Override protected String doInBackground(Void... params) { String msg = ""; try { if (gcm == null) { gcm = GoogleCloudMessaging.getInstance(context); } regid = gcm.register(SENDER_ID); msg = "Device registered, registration ID=" + regid; // You should send the registration ID to your server over // HTTP, so it // can use GCM/HTTP or CCS to send messages to your app. sendRegistrationIdToBackend(); // For this demo: we don't need to send it because the // device will send // upstream messages to a server that echo back the message // using the // 'from' address in the message. // Persist the regID - no need to register again. storeRegistrationId(context, regid); } catch (IOException ex) { msg = "Error :" + ex.getMessage(); // If there is an error, don't just keep trying to register. // Require the user to click a button again, or perform // exponential back-off. } return msg; } @Override protected void onPostExecute(String msg) { mDisplay.append(msg + "\n"); } }.execute(null, null, null); } 我收到错误： 03-01 19:15:36.261: E/AndroidRuntime(3467): FATAL EXCEPTION: AsyncTask #1 03-01 19:15:36.261: E/AndroidRuntime(3467): java.lang.RuntimeException: An error occured while executing doInBackground() 03-01 19:15:36.261: E/AndroidRuntime(3467): at android.os.AsyncTask$3.done(AsyncTask.java:299) 03-01 19:15:36.261: E/AndroidRuntime(3467): at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:352) 03-01 19:15:36.261: E/AndroidRuntime(3467): at java.util.concurrent.FutureTask.setException(FutureTask.java:219) 03-01 19:15:36.261: E/AndroidRuntime(3467): at java.util.concurrent.FutureTask.run(FutureTask.java:239) 03-01 19:15:36.261: E/AndroidRuntime(3467): at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:230) 03-01 19:15:36.261: E/AndroidRuntime(3467): at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1080) 03-01 19:15:36.261: E/AndroidRuntime(3467): at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:573) 03-01 19:15:36.261: E/AndroidRuntime(3467): at java.lang.Thread.run(Thread.java:841) 03-01 19:15:36.261: E/AndroidRuntime(3467): Caused by: java.lang.SecurityException: Not allowed to start service Intent { act=com.google.android.c2dm.intent.REGISTER pkg=com.google.android.gms (has extras) } without permission com.google.android.c2dm.permission.RECEIVE 03-01 19:15:36.261: E/AndroidRuntime(3467): at android.app.ContextImpl.startServiceAsUser(ContextImpl.java:1800) 03-01 19:15:36.261: E/AndroidRuntime(3467): at android.app.ContextImpl.startService(ContextImpl.java:1772) 03-01 19:15:36.261: E/AndroidRuntime(3467): at android.content.ContextWrapper.startService(ContextWrapper.java:480) 03-01 19:15:36.261: E/AndroidRuntime(3467): at com.google.android.gms.gcm.GoogleCloudMessaging.b(Unknown Source) 03-01 19:15:36.261: E/AndroidRuntime(3467): at com.google.android.gms.gcm.GoogleCloudMessaging.register(Unknown Source) 03-01 19:15:36.261: E/AndroidRuntime(3467): at com.example.gcm.DemoActivity$1.doInBackground(DemoActivity.java:177) 03-01 19:15:36.261: E/AndroidRuntime(3467): at com.example.gcm.DemoActivity$1.doInBackground(DemoActivity.java:1) 03-01 19:15:36.261: E/AndroidRuntime(3467): at android.os.AsyncTask$2.call(AsyncTask.java:287) 03-01 19:15:36.261: E/AndroidRuntime(3467): at java.util.concurrent.FutureTask.run(FutureTask.java:234) 03-01 19:15:36.261: E/AndroidRuntime(3467): ... 4 more 这是我的清单： <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.manyexampleapp" android:installLocation="preferExternal" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="11" android:targetSdkVersion="18" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.WAKE_LOCK" /> <uses-permission android:name="com.example.manyexampleapp.c2dm.permission.RECEIVE" /> <uses-permission android:name="com.example.manyexampleapp.gcm.permission.C2D_MESSAGE" /> <permission android:name="com.example.manyexampleapp.gcm.permission.C2D_MESSAGE" android:protectionLevel="signature" /> <application android:name="com.zoomer.ifs.BaseApplication" android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <activity android:name="com.zoomer.ifs.MainActivity" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden|screenSize" android:launchMode="singleTop"> <!-- <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> --> </activity> <!-- PUSH --> <!-- WakefulBroadcastReceiver that will receive intents from GCM services and hand them to the custom IntentService. The com.google.android.c2dm.permission.SEND permission is necessary so only GCM services can send data messages for the app. --> <receiver android:name="com.example.gcm.GcmBroadcastReceiver" android:permission="com.google.android.c2dm.permission.SEND" > <intent-filter> <!-- Receives the actual messages. --> <action android:name="com.google.android.c2dm.intent.RECEIVE" /> <category android:name="com.example.manyexampleapp" /> </intent-filter> </receiver> <service android:name="com.example.gcm.GcmIntentService" /> <activity android:name="com.example.gcm.DemoActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <!-- DB --> <activity android:name="com.example.db.DbActivity" android:label="@string/app_name" > <intent-filter> </intent-filter> </activity> <activity android:name="com.example.http.RestGetActivity" android:label="@string/app_name" android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" > </activity> <activity android:name="com.example.fb.FacebookLoginActivity" android:label="@string/app_name" > <!-- <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> --> </activity> <activity android:name="com.example.http.SendFeedbackActivity" android:label="@string/app_name" > <!-- <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> --> </activity> <activity android:name="com.zoomer.general.SearchNearbyOffersActivity" android:label="@string/app_name" > <intent-filter> </intent-filter> </activity> <activity android:name="com.facebook.LoginActivity" android:label="@string/app_name" > <intent-filter> </intent-filter> </activity> <activity android:name="com.example.manyexampleapp.StoresListActivity" > <intent-filter> </intent-filter> </activity> <activity android:name="com.example.fb.ShareActivity" > <intent-filter> </intent-filter> </activity> <activity android:name="com.example.notifications.NotificationsActivity" > <intent-filter> </intent-filter> </activity> <activity android:name="com.example.fb2.no_use.MainActivity" > <intent-filter> </intent-filter> </activity> <activity android:name="com.zoomer.offers.OffersListActivity" > <!-- <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> --> </activity> <activity android:name="com.example.http.SearchNearbyOffersActivity" > <!-- <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> --> </activity> <service android:name="com.example.geo.LocationService" android:enabled="true" /> <receiver android:name="com.example.manyexampleapp.BootReceiver" > <intent-filter> <action android:name="android.intent.action.BOOT_COMPLETED" /> <action android:name="com.example.manyexampleapp.LocationService.LOCATION_BROAD_MSG" /> </intent-filter> </receiver> <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/app_id" /> </application> </manifest> 改变 <uses-permission android:name="com.example.manyexampleapp.c2dm.permission.RECEIVE" /> 到 <!-- This app has permission to register and receive data message. --> <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" /> 您收到异常是因为您尚未定义所需的权限 如果应用程序开发后安装了播放服务， 可能会发生 com.google.android.c2dm.permission.RECEIVE 权限已被授予但 android 仍在抱怨同样的错误。 在这种情况下，您必须完全重新安装开发的应用程序才能使此权限发挥作用。 我认为你必须检查 Kotlin 版本兼容性。
如何解决错误“as.data.frame.default(data) 中的错误：无法强制类‘“lm”’到 data.frame”
abc4 <- lm(Sales~., data=abc4) summary(abc4) abc5 <- lm(Sales~ T+June+July+August+September+October+November+December, data=abc4) summary(abc5) I'm trying to run regression. If I run the fi...
Flatpickr AlpineJS 在危险范围选择上坚持插件
我有一个工作完美的 Flatpickr 日期范围日历，它将日期存储在会话存储中。这是我的代码： 我有一个工作完美的 Flatpickr 日期范围日历，它将日期存储在会话存储中。这是我的代码： <div x-data="{ chosenDates: sessionStorage.getItem('_x_range'), value: [], init() { let picker = flatpickr(this.$refs.picker, { mode: 'range', inline: false, dateFormat: 'm/d/Y', showMonths: 2, }) this.$watch('value', () => picker.setDate(this.value)) }, }" > <div class="flex items-center flex-1 gap-2 overflow-hidden border border-gray-500 rounded-lg"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="ml-4 bi bi-calendar-event-fill" viewBox="0 0 16 16"> <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-3.5-7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5"/> </svg> <input id="rangeValue" :value="chosenDates" placeholder="Add dates" x-ref="picker" type="text" class="p-0 py-4 placeholder-gray-600 border-0 bg-none focus:ring-0 " data-input> </div> </div> 设置项目： function dateRange() { var date = document.getElementById("rangeValue").value; sessionStorage.setItem("_x_range", date); sessionStorage.setItem("start", start); sessionStorage.setItem("end", end); const start = sessionStorage.getItem("start"); } $('#rangeValue').on('focus', ({ currentTarget }) => $(currentTarget).blur()) $("#rangeValue").prop('readonly', false) ``` Receive item: if (sessionStorage.getItem("_x_range") != null) { document.getElementById("chosenRange").innerHTML = sessionStorage.getItem("_x_range"); document.getElementById("rangeValue").value = sessionStorage.getItem("_x_range"); } ``` 如果可能的话，我想学习如何使用 AplineJS 和 Persist 来设置它，以免代码过多而过期。 这可能吗？ 这是一个可能的解决方案： <div x-data="{ thePicker: null, chosenDates: $persist([]).using(sessionStorage).as('_x_range'), init() { this.thePicker = flatpickr(this.$refs.picker, { mode: 'range', inline: false, dateFormat: 'm/d/Y', showMonths: 2, defaultDate: this.chosenDates, onChange: (selectedDates) => {this.chosenDates = [...selectedDates];} }); }, }" > <div class="flex items-center flex-1 gap-2 overflow-hidden border border-gray-500 rounded-lg"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="ml-4 bi bi-calendar-event-fill" viewBox="0 0 16 16"> <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-3.5-7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5"/> </svg> <input type="text" x-ref="picker" placeholder="Add dates" class="p-0 py-4 placeholder-gray-600 border-0 bg-none focus:ring-0" > <span title="Clear" class="text-blue-600 cursor-pointer" @click="thePicker.clear()" > X </span> </div> <div x-text="chosenDates"> </div> </div> 日期范围存储在 Alpine chosenDates 变量中，该变量通过 Persist 进行持久化并初始化为空数组。 当日期选择器初始化时，chosenDates变量用于填充defaultDate参数。 选择日期范围后，flatpicker 会触发 onChage 事件，因此我使用它将新范围复制到 chosenDates 变量中。 我添加了一个 “clear” 按钮以 flatpicker 方式重置输入字段，调用 clear() 方法（这是一个简单的示例），然后我必须将 flatpicker 引用存储在 thePicker 中变量. 我还添加了一个 通过 x-text 显示 choosenDates 的内容
如何使用Azure Portal将容器应用程序连接到自定义VNet？
我正在尝试按照此处的说明进行操作： https://learn.microsoft.com/en-us/azure/container-apps/vnet-custom?tabs=bash%2Cazure-cli&pivots=azure-portal 上面的分步页面说明了
Tiptap Lib。如何为 EditorContent 添加边框？
我很难编辑编辑器部分样式 我在 Recat 中使用 https://tiptap.dev/docs/editor/ Lib 现在我用这个渲染编辑器 我很难编辑编辑器部分样式 我正在使用 https://tiptap.dev/docs/editor/ Recat 中的 Lib 现在我用这个渲染编辑器 <EditorContent className='editor' editor={props.editor}/> 我的CSS .editor p{ margin: 1em 0; /* border: 1px solid #000; */ /* border-radius: 2px; */ } 未点击文本框时的结果 单击文本框时的结果 我想为此自定义 css 样式。有这方面的文档吗？ Tiptap，Vue.js 的富文本编辑器框架。要向 EditorContent 组件添加边框，您可以使用 CSS 自定义样式。但是，请记住，Tiptap 不提供开箱即用的编辑器内容的直接样式，因此您必须将样式应用于 Tiptap 生成的 HTML 元素。🔥 以下是如何向 EditorContent 添加边框的示例： <template> <EditorContent :editor="editor" class="custom-editor-content" /> </template> <style scoped> /* Add your custom styles for the editor content */ .custom-editor-content { border: 1px solid #000; border-radius: 2px; padding: 10px; /* Optional: Add some padding for better aesthetics */ } /* Customize other elements as needed */ .custom-editor-content p { margin: 1em 0; } </style> 在此示例中，custom-editor-content 类应用于 EditorContent 组件，并且标记内的 CSS 规则的范围将仅影响该组件内的元素。🌟 🟢🟡🟣 您可以探索 Tiptap 文档： https://tiptap.dev/docs/editor/guide/styling
我正在尝试编写一个自定义 ggplot 主题，如下所示https://joeystanley.com/blog/custom-themes-in-ggplot2/ 这很简单，但我想增加一些复杂性，我的一些情节......
调查表问题：调查表功能显示的观测值数量与数据中的实际观测值数量不同
数据<- data.frame(X =c(1,4,6,4,1,7,3,2,2),Y = c(6,5,9,9,43,65,45,67,90),weight=c(0.1,1.2,4,0,0,5,0.65,1,0)) dat_design <- svydesign(ids = ~1, data = Data, weights = Data$weight) ab=
我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个垫选择下拉菜单，是这样写的...... 我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个mat-select下拉菜单，是这样写的... <mat-select value="5" panelClass="custom-panel"> <mat-option value="5">5</mat-option> <mat-option value="10">10</mat-option> <mat-option value="20">20</mat-option> </mat-select> 在此我应用了panelClass及其CSS代码如下... .custom-panel { top: calc(100% + 10px) !important; } 而且仍然如下。下拉列表与其文本框重叠 这是未选中时的下拉菜单 这是选择后的下拉菜单 如何将面板放置在选择文本框的正下方... 您可以使用下面的CSS来做到这一点！ 我们使用csstransform将面板移动到底部！ .custom-panel { transform: translateY(25px) !important; } 堆栈闪电战
我正在尝试订阅存在于不同资源组上的自定义事件网格主题。例如，如果我在资源组发布者组中有一个自定义事件网格主题 my-custom-topic....
我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 导出类型 PageWithLayout = NextPage & { withLayout？：（页面：ReactElement）=> 我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 export type PageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { withLayout?: (page: ReactElement) => ReactNode; }; 这是我的使用方法： export const Interactions: PageWithLayout = () => { const [ getInteractions, { data: interactionData, fetchMore, variables, loading: isInteractionsLoading, error: isInteractionsError, }, ] = useGetInteractionsLazyQuery({ notifyOnNetworkStatusChange: true, fetchPolicy: "network-only", ssr: false, }); return ( <> <Box height={"100vh"}> </Box> </> ); }; Interactions.withLayout = (page: ReactElement) => { // how do I pass isInteractionsLoading as a prop to this component return <Layout>{page}</Layout>; }; export default Interactions; 我想要实现的是将 isInteractionsLoaded 和 isInteractionsError 作为属性传递给我的布局组件，以便我可以渲染这些状态。有没有一种方法可以实现此目的，而无需将布局组件移动到页面组件内？ 创建一个包装组件的 React Context 提供程序可能是您使用的解决方案，如果您不想使用任何其他包或不想使用 redux 等更强大的工具，则可以使用。 但是在这里使用有点尴尬，具体取决于包含交互的组件树是什么样子。否则可以根据您的需要使用 _app 入口点。 示例上下文和用法 import React from 'react'; export const InteractionContext = React.createContext({ isInteractionsLoading: false, isInteractionsError: null, }); // parent component or _app if necessary const ProviderComponent = () => { return ( <InteractionContext.Provider value={{ isInteractionsLoading, isInteractionsError }}> <Interactions /> </InteractionContext.Provider> ); }; const Layout = ({ children }) => { const { isInteractionsLoading, isInteractionsError } = useContext(InteractionContext); // Now you can use isInteractionsLoading and isInteractionsError here // ... return <div>{children}</div>; };
为 Data Fusion 或 Cloud Composer 实例分配静态 IP
我正在尝试使用 Google Data Fusion 连接到 Microsoft SQL Server 数据库，并且需要有一个静态 IP。 我尝试在子网上配置静态 IP 并将其连接到 Data Fusion ...
访问世博会资产的正确方法是什么？ 我试过这个： 等待 Asset.loadAsync(require('file:///assets/data/catalog.json')); 错误： 无法解析“file:///assets/data/catalog.json”...
无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact | Enba Camping</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="style/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <!-- NAV --> <div class="container-fluid"> <div class="row"> <div class="col-sm-12 p-0"> <nav class="navbar navbar-expand-lg bg-body-tertiary p-0 "> <div class="container-fluid bg-dark "> <a class="navbar-brand text-light mb-2" href="index.html">Enba Camping</a> <button class="navbar-toggler btn btn-light btn btn-outline-light bg-light m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link text-light text-center" aria-current="page" href="index.html">Home</a> <a class="nav-link text-light text-center" href="aboutus.html">About us</a> <a class="nav-link active text-light text-center" href="contact.html" aria-disabled="true">Contact</a> </div> </div> </div> </nav> </div> </div> </div> <!-- NAV END --> <!-- ABOUT US --> <div class="container-fluid p-0 bg-dark text-light"> <div class="row"> <div class="col-sm-6 ps-0"> <img src="images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg" alt="" class=" d-block w-100 c-img "> </div> <div class="col-sm-6 d-flex justify-content-center align-items-center "> <div class="text-center"> <h2 class="fw-bold display-4 ">Bize Ulaşın</h2> <!-- ABOUT US --> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Adınız</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Name"> </div> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email Adres</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email Address"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Mesajınız</label> <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" rows="3"></textarea> </div> <div class=" gap-2 d-md-block "> <button class="btn btn-light " type="button">Send</button> </div> </div> </div> </div> </div> <!-- ABOUT US END --> <!-- PRODUCT --> <div class="container mt-sm-5"> <div class="row text-center "> <h1 class="d-flex justify-content-center">Mekanlarımız</h1> <hr> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Karavan Parkı</h5> <p class="card-text">Ormanın içinde konumlanan karavan parkımız, tam anlamıyla bir doğa kaçamağı sunuyor. Ormanın huzurlu atmosferinde kendinizi kaybedin. Karavanınızla konforlu bir konaklama deneyimi yaşayın.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız </a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Çadırlı Kamp</h5> <p class="card-text">Orman içi çadırlı kamp alanımız, doğa severler için bir cennet. Gölgeli ağaçlar arasında konumlanan çadırlarımızda, kuş cıvıltıları ve huzur içinde bir konaklama deneyimi sizi bekliyor.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dağ Evi </h5> <p class="card-text">Dağ evimiz, şehrin gürültüsünden uzak,huzurlu bir konaklama imkanı sunuyor. Ferah odalarımızda dağ manzarasının keyfini çıkarabilir, gölet kenarındaki aktivitelerle vakit geçirebilirsiniz.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> </div> </div> <!-- PRODUCT END --> <!-- PROJECT --> <div class="row my-4"> <div class="col-sm-12"> <h1 class="d-flex justify-content-center">Galeri</h1> <hr> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/hichem-meghachou-7I-Rj_E9ihI-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/jimmy-conover-J_XuXX9m0KM-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/josh-campbell-UbbjVyibFuc-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/shelby-cohron-ESNV6KmLJMg-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/tegan-mierle-fDostElVhN8-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/toa-heftiba-x9I-6yoXrXE-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> </div> <!-- PROJECT END --> <!-- FOOTER --> <div class="bg-dark text-light"> <div class="container"> <footer class="pt-5 mt-5 "> <div class="row "> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column "> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-md-5 offset-md-1 mb-3"> <form> <h4> Abone Ol ve Doğanın Güzelliklerini Kaçırma!</h4> <p class="fs-6">Doğanın kucaklayıcı atmosferine adım atmak, huzurla dolu anlar yaşamak ve Enba Camping'in sunduğu özel fırsatları kaçırmamak için hemen abone ol! Sitemize abone olarak, doğanın gizemli güzellikleri, özel indirimler ve etkinliklerden ilk sen haberdar olacaksın.</p> <p class="fs-6"> Unutulmaz anılar biriktirmek ve doğanın kollarında huzurlu bir deneyim yaşamak için abone ol, Enba Camping'in eşsiz dünyasına adımını at! 🏕️✨ </p> <div class="d-flex flex-column flex-sm-row w-100 gap-2"> <label for="newsletter1" class="visually-hidden">Email address</label> <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> <div class="d-flex flex-column flex-sm-row justify-content-between border-top"> <p>© 2023 Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#twitter"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#instagram"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#facebook"></use> </svg></a></li> </ul> </div> </footer> </div> </div> <!-- FOOTER END --> </body> </html> 和CSS .jumb { vertical-align: inherit; } p { font-size: 24px; } .c-item { height: 480px; } .c-img { height: 100%; object-fit: cover; filter:brightness(0.9) } 这里。我不希望页面左右移动。我想让它适合全屏，但容器结构溢出了 请将这段代码添加到您的 CSS 文件中。然后，它就会起作用。 .row{ margin-right: 0px; }
我正在使用 laravel livewire 3 获取页面未找到
单击时，我在控制台中找不到页面 错误：POST http://localhost/livewire/update 404（未找到） counter.blade.php {{ $this->count }} 单击时，我在控制台中找不到页面 错误：POST http://localhost/livewire/update 404（未找到） counter.blade.php <div> <h1>{{ $this->count }}</h1> <button wire:click="increment">+</button> <button wire:click="decrement">-</button> </div> 在刀片中我有以下内容： @section('custom-js') @livewireScripts @endsection @section('custom-css') @livewireStyles @endsection <livewire:counter /> 当单击增量或减量时，我找不到页面 如果您使用Livewire3，则无需手动注入livewire资源的css和javascript，因为它们是自动注入的。 检查此文档页面以查看。 您必须先创建 Livewire 组件 php artisan make:livewire CreatePost Livewire 组件的更新功能。 public function update(){...}
我想使用最简单的方法通过jquery ajax上传文件。 我的代码是： ... 我想用最简单的方法通过jquery ajax上传文件。 我的代码是： <body> <form action="?" method="POST" enctype="multipart/form-data"> <input type="file" name="myfile" /><br> <input type="submit" name="submit_btn" value="Submit" /> </form> <div> <?php if (isset($_POST['submit'])) { //move_uploaded_files()... } ?> </div> </body> 当您使用网页上的表单向服务器发送数据时，您可以选择使用 GET 或 POST 方法。这些方法决定了数据如何发送到服务器。 当您将表单方法设置为 GET 时，您在表单字段中填写的数据（包括您选择的文件）会以某种方式添加到网址中。您可能已经注意到，当您提交表单时，浏览器中的 URL 会发生变化。然而，这种方法有一些局限性。它不适合发送大块数据（例如文件），并且以这种方式发送的数据量有最大限制。 另一方面，当您使用 POST 方法时，您输入表单的数据会以不同的方式发送，有点像后台的隐藏包。它更适合包含文件在内的大量数据。这就是当您将表单方法更改为 POST 时文件上传有效的原因。服务器知道如何处理此类数据并正确存储它。 在您的具体情况下，当您将表单方法更改为 GET 时，$_FILES 数组无法按预期工作，因为它旨在处理使用 POST 方法发送的数据。这有点像试图在方孔中安装圆钉 - GET 方法并非旨在像 POST 那样处理文件上传。 如果你确实需要使用GET方法并且仍然想上传文件，那就有点棘手了。您可能需要发挥创意，以可添加到 URL 的方式对文件数据进行编码，但由于各种问题，这并不是处理文件的最佳方式。 一般来说，对于文件上传，使用POST方法会更好。它确保您的文件安全地到达服务器，并避免尝试将像文件这样的大东西放入像 URL 这样的小空间中的复杂性。如果您决定使用 GET，您可能需要考虑不同的方法来实现您的目标，例如将文件临时存储在服务器上并通过 URL 传递对这些文件的引用。 那是因为 GET 请求没有正文，而这就是文件所在的位置
我一直在开发本教程中制作的应用程序版本（https://learn.microsoft.com/pl-pl/aspnet/core/data/ef-rp/complex-data-model?view =aspnetcore-5.0&tabs=visual-studio）。我有
我将用代码来说明我的问题： #包括 void PrintInt(const unsigned char*& ptr) { 整数数据=0； ::memcpy(&data, ptr, sizeof(data)); // 推进 po...
我想移动上方平均线下方的条形标签。 我正在使用这段代码来制作这个图表 水平 <- mean(data$SPAD) quux <- data %>% 选择（基因型，规格...