pre-trained-model 相关问题


VueJS [电子邮件受保护] 组件 v-model 最初不会更新父级

我有一个父子组件设置来测试 v-model。当您输入值时,子级会更新父级,但最初不会。 家长: 从“vue”导入{ref}; 导入文本输入...</desc> <question vote="0"> <p>我有一个父子组件设置来测试 v-model。当您输入值时,子级会更新父级,但最初不会。</p> <p>家长:</p> <pre><code>&lt;script setup&gt; import { ref } from &#39;vue&#39;; import TextInput from &#39;./TextInput.vue&#39;; const size = ref(1); const color = ref(&#39;red&#39;); &lt;/script&gt; &lt;template&gt; &lt;TextInput v-model:size=&#34;size&#34; v-model:color.capitalize=&#34;color&#34; /&gt; &lt;div :style=&#34;{ fontSize: size + &#39;em&#39;, color: color }&#34;&gt; &lt;!-- Question 1: this line shows &#34;red&#34; but &#34;Red&#34; is what I want initially --&gt; &lt;p&gt;{{ size }} {{ color }}&lt;/p&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>子:TextInput.vue</p> <pre><code>&lt;script setup&gt; import { ref } from &#39;vue&#39;; const size = defineModel(&#39;size&#39;); const [color, modifier] = defineModel(&#39;color&#39;, { set(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; }, //only this forces color to upper case on start in the input get(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; } }); &lt;/script&gt; &lt;template&gt; &lt;input v-model=&#34;size&#34;&gt; &lt;input v-model=&#34;color&#34;&gt; &lt;/template&gt; </code></pre> <p>问题2: 如果我在defineModel中省略“color”(“color”,{...,我会收到以下错误</p> <p>[Vue warn]:无关的非 props 属性(颜色、colorModifiers)被传递给组件但无法自动继承,因为组件渲染片段或文本根节点。</p> <pre><code>at &lt;TextInput size=1 onUpdate:size=fn color=&#34;red&#34; ... &gt; at &lt;ComponentVModel&gt; at &lt;App&gt; </code></pre> <p>如果我只保留</p> <pre><code>&lt;input v-model=&#34;color&#34;&gt; </code></pre> <p>line,为了让它不是片段,根本不更新。</p> </question> <answer tick="false" vote="0"> <p>问题 1:在调用子元素中的 v-model setter 之前,<pre><code>&lt;p&gt;</code></pre> 元素中的大写不会发生。 <strong>设置器是同步回父级的设置器</strong>。由于在输入接收到来自用户的一些文本之前不会调用设置器,因此父级中的 <pre><code>&lt;p&gt;</code></pre> 元素将显示初始值,在您的情况下为“红色”。</p> <p>问题 2:defineModel 根据第一个参数字符串“color”声明一个 prop。该道具旨在匹配父级<strong>上的</strong>v模型的参数,即<pre><code>v-model:color</code></pre>。从defineModel中删除“颜色”意味着父v模型必须从<pre><code>v-model:color</code></pre>更改为<pre><code>v-model</code></pre></p> </answer> </body></html>


防止打开的窗口覆盖 opener 的 `close` 方法

我有一个 test1.html 文件,仅包含以下代码: janela = window.open("http://localhost/test2.html","_blank","width=1000,height=400,left=600,top=0"); </...</desc> <question vote="1"> <p>我有一个 <pre><code>test1.html</code></pre> 文件,其中仅包含以下代码:</p> <pre><code>&lt;script&gt; janela = window.open(&#34;http://localhost/test2.html&#34;,&#34;_blank&#34;,&#34;width=1000,height=400,left=600,top=0&#34;); &lt;/script&gt; </code></pre> <p>上面的代码将打开窗口<pre><code>test2.html</code></pre>,其中包含以下代码:</p> <pre><code>&lt;script&gt; opener.window.janela.close = null; &lt;/script&gt; </code></pre> <p>现在,在窗口 <pre><code>test1.html</code></pre> 上,如果我尝试关闭刚刚使用 <pre><code>janela.close()</code></pre> 打开的窗口,我将无法这样做。</p> <p>我知道在 <pre><code>noopener</code></pre> 方法中使用 <pre><code>window.open</code></pre> 会阻止 <pre><code>test2.html</code></pre> 访问 <pre><code>test1.html</code></pre> 但是它也会阻止我在 <pre><code>test1.html</code></pre> 关闭 <pre><code>test2.html</code></pre>。</p> <p>那么我怎样才能可靠地打开 <pre><code>window</code></pre> 并能够在将来自信地关闭它?</p> <p><strong>根据@mplungjan</strong></p>进行编辑 <p>在@mplungjan的帮助下,我做到了:</p> <pre><code>myClose = window.close; janela = window.open(&#34;https://a2eestrutural.eng.br/?fdfk&#34;,&#34;_blank&#34;,&#34;width=1000,height=400,left=600,top=20&#34;); janela.myClose = window.myClose; </code></pre> <p>窗口打开后,我尝试执行<pre><code>janela.myClose();</code></pre>并收到此错误消息:</p> <pre><code>An attempt was made to break through the security policy of the user agent. </code></pre> <p>知道我该如何继续吗?</p> </question> <answer tick="false" vote="0"> <p>为什么要有这个代码?如果您可以控制打开的内容...</p> <p>无论如何,请在打开窗口的脚本之前尝试此操作</p> <pre><code>const myClose = window.close; const janela = window.open(&#34;http://localhost/test2.html&#34;,&#34;_blank&#34;,&#34;width=1000,height=400,left=600,top=0&#34;); .... janela.myClose() </code></pre> </answer> </body></html>


如何使用webpack 5向脚本标签添加nonce属性

我使用 webpack 5 和 HtmlWebpackPlugin 来构建我的前端 SPA。 我需要向 添加随机数属性 <question vote="0"> <p>我正在使用 webpack 5 和 <pre><code>HtmlWebpackPlugin</code></pre> 来构建我的前端 SPA。</p> <p>我需要将 <pre><code>nonce</code></pre> 属性添加到 <pre><code>&lt;script ...</code></pre> 注入的 <pre><code>HtmlWebpackPlugin</code></pre> 标签中。</p> <p>我该怎么做?</p> <p>额外问题:之后我在服务之前使用此页面作为 Thymeleaf 模板。如何注入<pre><code>nonce</code></pre>值?</p> </question> <answer tick="false" vote="0"> <p>如果您使用的是 webpack 4,海里有很多鱼——只需使用任何注入属性的插件,例如 <a href="https://github.com/numical/script-ext-html-webpack-plugin" rel="nofollow noreferrer">script-ext-html-webpack-plugin</a> 或 <a href="https://github.com/dyw934854565/html-webpack-inject-attributes-plugin" rel="nofollow noreferrer">html-webpack-inject-attributes-plugin</a> </p> <p>但是,上面提到的大多数插件都不适用于 webpack 5。解决方法是使用 <pre><code>HtmlWebpackPlugin</code></pre> <a href="https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates" rel="nofollow noreferrer">templates</a>。</p> <ol> <li>将<pre><code>inject</code></pre>中指定的<pre><code>false</code></pre>选项中的<pre><code>HtmlWebpackPlugin</code></pre>设置为<pre><code>webpack.config</code></pre>。</li> <li>在模板中添加以下代码,将所有生成的脚本插入到结果文件中:</li> </ol> <pre><code> &lt;% for (key in htmlWebpackPlugin.files.js) { %&gt; &lt;script type=&#34;text/javascript&#34; defer=&#34;defer&#34; src=&#34;&lt;%= htmlWebpackPlugin.files.js[key] %&gt;&#34;&gt;&lt;/script&gt; &lt;% } %&gt; </code></pre> <ol start="3"> <li>在 <pre><code>script</code></pre> 中添加所有必要的属性。百里香示例:</li> </ol> <pre><code> &lt;% for (key in htmlWebpackPlugin.files.js) { %&gt; &lt;script type=&#34;text/javascript&#34; defer=&#34;defer&#34; th:attr=&#34;nonce=${cspNonce}&#34; src=&#34;&lt;%= htmlWebpackPlugin.files.js[key] %&gt;&#34;&gt;&lt;/script&gt; &lt;% } %&gt; </code></pre> <p>基于 <a href="https://github.com/jantimon/html-webpack-plugin/issues/538#issuecomment-270340587" rel="nofollow noreferrer">github 帖子</a></p>的答案 </answer> </body></html>


encodeURIComponent 的结果在服务器端未正确解码

我正在努力正确编码/解码 JSON 字符串,以便通过 GET 请求中的查询字符串发送。 ...</desc> <question vote="0"> <p>我正在努力正确编码/解码 JSON 字符串,以便通过 GET 请求中的查询字符串发送。</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type=&#34;text/javascript&#34;&gt; function executeRequest(applyUriEncode) { var json = &#39;{&#34;foo&#34;:&#34;💀🍕⚡💎&amp;🎁❤很久很久以前&#34;}&#39;; var xmlhttp = new XMLHttpRequest(); xmlhttp.open(&#39;GET&#39;, &#39;https://example.com/test.php?json=&#39;+(applyUriEncode ? encodeURIComponent(json) : json), false); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) { console.log(&#34;applyUriEncode: &#34;+(applyUriEncode ? &#34;true\n&#34; : &#34;false\n&#34;)); console.log(xmlhttp.responseText+&#34;\n&#34;); } }; xmlhttp.send(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;button onClick=&#34;executeRequest(true);&#34;&gt;Submit encoded&lt;/button&gt; &lt;button onClick=&#34;executeRequest(false);&#34;&gt;Submit unencoded&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <pre><code>&lt;?php // test.php echo $_GET[&#39;json&#39;]; </code></pre> <p>点击<pre><code>Submit encoded</code></pre>和<pre><code>Submit unencoded</code></pre>时的输出:</p> <pre><code>applyUriEncode: true {&#34;foo&#34;:&#34;💀ðŸ•âš¡ðŸ’Ž&amp;ðŸŽâ¤å¾ˆä¹…很久以å‰&#34;} applyUriEncode: false {&#34;foo&#34;:&#34;💀🍕⚡💎 </code></pre> <p>期望的输出是</p> <pre><code>{&#34;foo&#34;:&#34;💀🍕⚡💎&amp;🎁❤很久很久以前&#34;} </code></pre> <p>我需要对 JSON 进行编码,否则,特殊字符(例如 <pre><code>&amp;</code></pre>)会破坏字符串。然而,PHP 似乎没有正确解码 <pre><code>encodeURIComponent</code></pre> 的结果。我在服务器端尝试了 <pre><code>urldecode</code></pre>,但这并没有改变任何事情(输出保持不变)。</p> <p>我觉得这是一个基本问题,在 StackOverflow 上应该有答案,但我找不到。我发现了大量具有类似问题的问题,但没有一个问题能让我找到针对这个特定问题的解决方案。</p> </question> <answer tick="false" vote="0"> <p>您遇到的问题与字符编码有关。当您在 JavaScript 中使用 <pre><code>encodeURIComponent</code></pre> 时,它会正确对 JSON 字符串(包括 Unicode 字符)进行百分比编码。但是,当 PHP 接收查询字符串时,它不会自动将百分比编码的 Unicode 字符解码回其原始形式。</p> <p>要解决此问题,您需要确保 PHP 将传入数据解释为 UTF-8,然后使用 <pre><code>urldecode</code></pre> 解码百分比编码的字符串。以下是如何修改 PHP 代码以获得所需的输出:</p> <pre><code>&lt;?php // test.php // Get the raw, percent-encoded JSON string from the query parameter $encodedJson = $_GET[&#39;json&#39;]; // Manually decode the percent-encoded string $decodedJson = urldecode($encodedJson); // Ensure that the string is treated as UTF-8 $decodedJson = mb_convert_encoding($decodedJson, &#39;UTF-8&#39;, &#39;UTF-8&#39;); // Output the decoded JSON string echo $decodedJson; </code></pre> <p>此代码片段假设您的 PHP 环境配置为使用 UTF-8 作为默认字符编码。如果不是,您可能需要在脚本开头使用 <pre><code>mb_internal_encoding(&#39;UTF-8&#39;)</code></pre> 将字符编码显式设置为 UTF-8。</p> <p>此外,需要注意的是,当您在查询字符串中发送 JSON 数据时,应始终使用 <pre><code>encodeURIComponent</code></pre> 对 JSON 字符串进行编码。这是因为查询字符串具有某些保留字符(如 <pre><code>&amp;</code></pre>、<pre><code>=</code></pre>、<pre><code>+</code></pre>、<pre><code>?</code></pre> 等),如果不进行编码,可能会破坏 URL 的结构。 <pre><code>encodeURIComponent</code></pre> 函数确保这些字符被安全编码,这样它们就不会干扰 URL 的格式。</p> <p>在客户端,当将 <pre><code>encodeURIComponent</code></pre> 标志设置为 <pre><code>applyUriEncode</code></pre> 时,您的 JavaScript 代码使用 <pre><code>true</code></pre> 是正确的。始终使用编码版本在查询字符串中发送数据,以避免特殊字符出现问题。</p> </answer> </body></html>


预提交:提交新文件时找不到可执行的Python

我正在尝试在 Ubuntu 22.04.1 / Python 3.10.6 上使用预提交 2.20.0。 我按照 https://pre-commit.com/#installation 上的说明操作,并使用 pip (22.2.2) 安装了 pre-commit。 这是我的.pre-


从数据库中提取后出现在<textarea>中

数据首先从 捕获。 1号线 2号线 3号线 ETC 它在存储到数据库之前通过此函数发送(我愿意接受更好的解决方案,但如果 PDO 是其中之一......</desc> <question vote="0"> <p>数据首先从 <pre><code><textarea></code></pre> 捕获。</p> <pre><code>Line1 Line2 Line3 etc </code></pre> <p>它在存储到数据库之前通过此函数发送(我愿意接受更好的解决方案,但如果 PDO 是其中之一,我不理解它并且尚未使其工作)</p> <pre><code>function test_input($data) { global $conn; $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); $data = mysqli_real_escape_string($conn, $data); return $data; } </code></pre> <p>这是我防止注射的方法(不是我的方法,而是我发现迄今为止效果很好的一种方法,它给我带来了<pre><code><textarea></code></pre>中换行的问题)。</p> <p>我尝试从数据库中提取数据并将其显示在<pre><code><textarea></code></pre>中,它显示<pre><code>\r\n</code></pre>而不是换行。它存储在带有换行符的数据库中(我没有看到<pre><code>\r\n</code></pre>,但我看到了新行上的数据)。</p> <p>我已经尝试过<pre><code>nl2br()</code></pre>,我已经尝试过<pre><code>html_entity_decode()</code></pre>,我已经尝试过<pre><code>str_replace()</code></pre>从<pre><code>\r\n</code></pre>到<pre><code><br></code></pre>(然后它只显示<pre><code><br></code></pre>文字而不是<pre><code>\r\n</code></pre>)。</p> <p>根据我在这个网站上发现的研究,这是我在将其存储到数据库之前对其所做的事情造成的,但没有一个解决方案对我有用。</p> </question> <answer tick="true" vote="2"> <p>将文本中的 <pre><code>\r\n</code></pre> 替换为 <pre><code>&#13;&#10;</code></pre>,然后将其放入文本区域并向用户显示。</p> <p>它对我有用。</p> </answer> <answer tick="false" vote="0"> <p>试试这个可能会有帮助</p> <pre><code><?php function nl2br2($string) { $string = str_replace(array("\r\n", "\r", "\n"), "<br />", $string); return $string; } ?> </code></pre> </answer> <answer tick="false" vote="0"> <p>Html 与 php 和 windows(回车符和换行符)。勒 思考会发生什么 当缓冲区中有一个值字段时。缓冲区可以来自或去往输入/输出设备 缓冲区内的内容可能需要替换为适合设备的字符串。 从数据库逐行或从 SQL api 查询提取数据将需要重复正则表达式和替换操作,直到所有 表达方式发生改变。在输入进入数据库字段之前对其进行防弹检查始终是一个好主意。 我遇到了由额外数据(转义序列)引起的打印问题,该问题导致打印机无法正常工作 停止并等待重置序列。没有人理解为什么打印作业无法打印类似的内容 12个月。我编写了一个过滤器并将其添加到打印机界面。问题解决了</p> </answer> </body></html>


有什么问题吗?文本区域什么也没显示,但值是

我正在编写代码以在 中以灰色向用户显示提示; 接下来的想法是: 最初以灰色显示“请在此处输入您的询问”; 如果用户点击它,颜色会变为...</desc> <question vote="3"> <p>我正在编写代码以在 <pre><code><textarea/></code></pre> 中以灰色向用户显示提示;</p> <p>下一个想法是:</p> <ol> <li>最初将<pre><code>'Please, type your inquiry there'</code></pre>置于灰色;</li> <li>如果用户单击它,颜色将变为黑色,文本将变为 <pre><code>''</code></pre>。这部分工作正常;</li> <li>如果用户输入然后删除(即将字段留空),那么我们需要将 <pre><code>'Please, type your inquiry there'</code></pre> 放回灰色。</li> </ol> <p>步骤 (3) 在 Chrome 和 Firefox 中均不起作用。它什么也没显示。当我使用 Chrome 检查器时,它显示:</p> <blockquote> <p>element.style { 颜色: rgb(141, 141, 141); }</p> </blockquote> <p>这是正确的,而 HTML 中的 <pre><code>"Please, type your inquiry there"</code></pre> 也是正确的。但场地是空的。可能是什么问题??? 我特别使用了 <pre><code>console.log()</code></pre>,它们还显示应该是......的输出 </p>这是 HTML 和 JS 代码:<p> </p><code><textarea name='contact_text' id='contact_text' onclick='text_area_text_cl();' onBlur='text_area_text_fill();'> </textarea> <script> var contact_text_changed = false; var contact_contacts_changed = false; function text_area_text() { if (contact_text_changed == false) { $("#contact_text").css("color","#8d8d8d"); $("#contact_text").html('Please, type your inquiry there'); } else { $("#contact_text").css("color","#000000"); } // Write your code here }; function text_area_text_cl() { if (contact_text_changed == false) { $("#contact_text").text(''); $("#contact_text").css("color","#000000"); console.log('sdfdfs111'); contact_text_changed = true; } }; function text_area_text_fill() { if ($("#contact_text").val() == '') { contact_text_changed = false; $("#contact_text").css("color","#8d8d8d"); $("#contact_text").html('Please, type your inquiry there'); //document.getElementById('contact_text').innerHTML = 'Please, type your inquiry there' console.log('sdfdfs'); } else { console.log('__'); } }; // call functions to fill text_area_text(); </script> </code><pre> </pre> </question> <answer tick="true" vote="3">要设置 <p><code><textarea></code><pre> 的值,您需要使用 </pre><code>.val()</code><pre>:</pre> </p><code>$("#contact_text").val(''); </code><pre> </pre>或<p> </p><code>$("#contact_text").val('Please, type your enquiry there'); </code><pre> </pre>等等。让“占位符”代码正常工作是很棘手的。 <p>较新的浏览器允许<a href="http://caniuse.com/#search=placeholder" rel="nofollow">:</a> </p><code><textarea placeholder='Please, type your enquiry there' id='whatever'></textarea> </code><pre> </pre>他们会为您管理这一切。<p> </p><p>编辑<em> - 从评论中,这里解释了为什么 </em><code>.html()</code><pre> 最初有效(嗯,它</pre>确实<em>有效,但请继续阅读)。 </em><code><textarea></code><pre> 元素的标记内容(即元素中包含的 DOM 结构)表示 </pre><code><textarea></code><em> 的 </em>initial<pre> 值。在任何用户交互之前(和/或在 JavaScript 触及 DOM 的“value”属性之前),这就是显示为字段值的内容。然后,更改 DOM 的该部分就会更改该初始值。然而,一旦进行了一些用户交互,初始值就不再与页面视图相关,因此不会显示。仅显示更新后的值。</pre> </p> </answer></body>


OSError:在目录中找不到名为 model.safetensors 的文件时出错

我正在尝试加载以 Hugging Face 安全张量格式保存的 LLAMA2 模型。模型保存在两部分 model-part1.safetensors 和 model-part2.safetensors 中。 我正在使用 LlamaForCausalLM。


文本区域高度的 CSS 样式不起作用

元素的默认大小对于我的使用来说太小了,我尝试使用以下CSS代码自定义高度: 文本区域{ 宽度:400px; 高度:150px; } html </desc> <question vote="0"> <p><pre><code><textarea></code></pre>元素的默认大小对于我的使用来说太小了,我尝试使用以下CSS代码自定义高度:</p> <pre><code>textarea { width:400px; height:150px; } </code></pre> <p>html 文本区域:</p> <pre><code><li> Body*:<br> <textarea name="body"></textarea> </li> </code></pre> <p>但这行不通。有什么解决办法吗??</p> <p>P.S:我使用的是 Mozilla firefox。</p> </question> <answer tick="false" vote="2"> <p>效果很好。看这个<a href="http://jsfiddle.net/qhqLV/" rel="nofollow noreferrer">http://jsfiddle.net/qhqLV/</a></p> <p>你的html代码</p> <pre><code><li> Body*:<br> <textarea name="body"></textarea> </li> </code></pre> <p>你的CSS</p> <pre><code>textarea { width:400px; height:150px; } </code></pre> <p>注意:调试代码并检查父元素的宽度和高度。我认为这就是问题所在。可能是文本区域在执行过程中接受任何其他样式。</p> </answer> </body></html>


获取不可编辑、灰色但内容可选的输入元素

我有 和 元素,其内容在某些步骤中不应可编辑。 因此,最初我向这些元素添加了一个禁用属性。元素</desc> <question vote="0"> <p>我有 <pre><code><input type="text"></code></pre> 和 <pre><code><textarea></code></pre> 元素,其内容在某些步骤中不应可编辑。</p> <p>所以,最初我为这些元素添加了 <pre><code>disabled</code></pre> 属性。这些元素变得不可编辑并且呈灰色。这个行为很好。</p> <p>但是,它们的内容应该是可选择的,而 <pre><code>disabled</code></pre> 属性避免了这种情况。所以我切换到了 <pre><code>readonly</code></pre> 属性。元素仍然不可编辑,内容可以选择,但不再是灰色的。</p> <p>因此,我正在寻找一种解决方案来包含以下元素:不可编辑、可选择和灰显。</p> <ul> <li>我可以应用一些 CSS,但我更喜欢禁用输入的本机浏览器样式。</li> <li>这些元素不是<pre><code><form></code></pre>的一部分,因此无需担心表单提交。</li> </ul> </question> <answer tick="false" vote="0"> <p>要在不使用disabled属性的情况下实现具有不可编辑、可选择和灰显元素的所需行为,您可以使用CSS和readonly属性的组合。您可以设置只读元素的样式,使其看起来像已禁用,同时保留选择其内容的能力。以下是如何实现此目标的示例:</p> <pre><code>input[readonly], textarea[readonly] { color: #777; /* Set text color to a muted color */ background-color: #eee; /* Set background color to a light grey */ cursor: not-allowed; /* Show a not-allowed cursor to indicate non editable state */ } /* Adjust the style for textareas, if needed */ textarea[readonly] { resize: none; /* Disable textarea resizing */ } </code></pre> <pre><code><!-- Your HTML elements with readonly attribute --> <input type="text" readonly> <textarea readonly></textarea> </code></pre> </answer> </body></html>


.Net core Web API 将 json/model 值设置为 NULL

我有一个 .Net core Web API,它接受以下 JSON:(RequestModel) { “isSpecimen”:正确, “形式”: { “网络”:{ “abc1...


Bootstrap 5 中的选项卡未更改

我有一个引导选项卡区域,并使用 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>&lt;script type=&#34;text/javascript&#34;&gt; $(&#39;#tabList button&#39;).click ( function (e) { e.preventDefault(); // bootstrap.Tab.getInstance(this).show() $(this).tab(&#39;show&#39;) } ); &lt;/script&gt;</code></pre> <pre><code>&lt;ul class=&#34;nav nav-tabs&#34; id=&#34;tabList&#34; role=&#34;tablist&#34;&gt; &lt;li class=&#34;nav-item&#34; role=&#34;presentation&#34;&gt; &lt;button class=&#34;nav-link&#34; id=&#34;jobs-tab&#34; data-bs-toggle=&#34;tab&#34; data-bs-target=&#34;#jobs&#34; type=&#34;button&#34; role=&#34;tab&#34; aria-controls=&#34;jobs&#34; aria-selected=&#34;true&#34;&gt;[tabHeaderJobs]&lt;/button&gt; &lt;/li&gt; &lt;li class=&#34;nav-item&#34; role=&#34;presentation&#34;&gt; &lt;button class=&#34;nav-link active&#34; id=&#34;employees-tab&#34; data-bs-toggle=&#34;tab&#34; data-bs-target=&#34;#employees&#34; type=&#34;button&#34; role=&#34;tab&#34; aria-controls=&#34;employees&#34; aria-selected=&#34;false&#34;&gt;[tabHeaderEmployees]&lt;/button&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class=&#34;tabContent&#34; id=&#34;tabContent&#34;&gt; &lt;div class=&#34;tab-pane fade&#34; id=&#34;jobs&#34; role=&#34;tabpanel&#34; aria-labelledby=&#34;jobs-tab&#34;&gt;[tabContentJobs]&lt;/div&gt; &lt;div class=&#34;tab-pane fade active show&#34; id=&#34;employees&#34; role=&#34;tabpanel&#34; aria-labelledby=&#34;employees-tab&#34;&gt;[tabContentEmployees]&lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> <p>´´´</p> <p>主选择器是 tabList 还是 tabContent ?</p> <p>那么我是否需要从按钮中选择切换名称,然后使用 <pre><code>($(&#39;#tabContent a[href=&#34;#toggleNameOfTab&#34;]&#39;).tab(&#39;show&#39;)</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>$(&#39;.nav-link&#39;).click(function() { $(this).tab(&#39;show&#39;); }); </code></pre> <ol start="2"> <li>要以编程方式激活页面加载时的特定选项卡,您可以执行以下操作:</li> </ol> <pre><code>$(&#39;#employees-tab&#39;).tab(&#39;show&#39;); </code></pre> <p>这将在加载时激活#employees-tab。</p> <p>需要了解的关键事项:</p> <ul> <li>使用 <pre><code>.nav-link</code></pre> 将点击处理程序附加到选项卡按钮</li> <li>使用 <pre><code>$(selector).tab(&#39;show&#39;)</code></pre> 以编程方式切换选项卡,其中 <pre><code>selector</code></pre> 是选项卡按钮的 ID 或元素</li> </ul> </answer> </body></html>


为什么 .className = .... 不起作用,而 classList.add() 却起作用?

.youtube-文本{ 字体系列:Arial; 字体大小:更大; } .订阅按钮{ 字体系列...</desc> <question vote="0"> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .youtube-text { font-family: Arial; font-size: larger; } .subscribe-button { font-family: &#39;Arial Narrow Bold&#39;; font-size: large; color: white; background-color: black; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } .is-subscribed { font-family: &#39;Arial Narrow Bold&#39;; font-size: large; color: black; background-color: white; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } &lt;/style&gt; &lt;title&gt; &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p2&gt;Youtube Subscribe Button&lt;/p2&gt;&lt;br&gt;&lt;Br&gt; &lt;button class = &#39;subscribe-button&#39; onclick=&#34; subscribeButton(); &#34;&gt;Subscribe&lt;/button&gt; &lt;script async&gt; function subscribeButton() { const subButton = document.querySelector(&#39;.subscribe-button&#39;); if (subButton.innerHTML === &#39;Subscribe&#39;){ subButton.innerHTML = &#39;Subscribed&#39;; subButton.classList.add(&#39;is-subscribed&#39;); } else { subButton.innerHTML = &#39;Subscribe&#39;; subButton.classList.remove(&#39;is-subscribed&#39;); } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .youtube-text { font-family: Arial; font-size: larger; } .subscribe-button { font-family: &#39;Arial Narrow Bold&#39;; font-size: large; color: white; background-color: black; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } .is-subscribed { font-family: &#39;Arial Narrow Bold&#39;; font-size: large; color: black; background-color: white; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } &lt;/style&gt; &lt;title&gt; &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p2&gt;Youtube Subscribe Button&lt;/p2&gt;&lt;br&gt;&lt;Br&gt; &lt;button class = &#39;subscribe-button&#39; onclick=&#34; subscribeButton(); &#34;&gt;Subscribe&lt;/button&gt; &lt;script async&gt; function subscribeButton() { const subButton = document.querySelector(&#39;.subscribe-button&#39;); if (subButton.innerHTML === &#39;Subscribe&#39;){ subButton.innerHTML = &#39;Subscribed&#39;; subButton.className = &#39;is-subscribed&#39;; } else { subButton.innerHTML = &#39;Subscribe&#39;; subButton.className = &#39;subscribe-button&#39;; } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>你好, 我刚刚开始使用 JS,想知道我遇到的这个问题。顶部的代码有效,底部的代码无效,第一次单击时,它确实将类更改为已订阅,但是当我按下按钮,它给出了一个错误,并且不再改变它,我只是想知道为什么会这样。</p> </question> <answer tick="false" vote="0"> <p>默认的 DOM elemnt 对象没有名为 <pre><code>className</code></pre> 的属性。将 classList 属性与 <pre><code>.add()</code></pre> 和 <pre><code>.remove()</code></pre> 方法结合使用。</p> </answer> <answer tick="false" vote="0"> <blockquote> <p>但是当我按下按钮时,它给出了一个错误并且不再改变它</p> </blockquote> <p>当您按下按钮时,代码会按类查找元素:</p> <pre><code>const subButton = document.querySelector(&#39;.subscribe-button&#39;); </code></pre> <p>但是该类没有这样的元素。当您设置 <em><code>className</code></em> 时,您<pre>删除了</pre>该类:</p> <pre><code>subButton.className = &#39;is-subscribed&#39;; </code></pre> <p>这<em>用</em><code>class</code><pre>替换了</pre>整个<pre><code>is-subscribed</code></pre>,而不是<em>添加</em>到类列表中。</p> </answer> </body></html>


如何以 Svelte 方式设置导出和开槽零件的样式?

Svelte slot 的功能是否像 vanilla-js/dom 一样(我似乎无法让它工作)。 在 html/js 中我可以这样做: 身体{颜色:红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样(我似乎无法让它工作)。</p> <p>在 html/js 中我可以做:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;style&gt; body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} &lt;/style&gt; &lt;h1&gt;Hello World&lt;/h1&gt; &lt;my-element&gt; &lt;div slot=&#34;header&#34;&gt;&lt;strong&gt;Header&lt;/strong&gt;&lt;/div&gt; &lt;div slot=&#34;body&#34;&gt;Body&lt;/div&gt; &lt;/my-element&gt; &lt;script&gt; customElements.define(&#39;my-element&#39;, class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: &#39;open&#39;}); shadowRoot.innerHTML = ` &lt;style&gt; .container { border: solid 1px blue; padding: 5px; position: relative; &amp;:after { content: &#34;my-element&#34;; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part=&#34;body&#34;] ::slotted(div) { background-color: lightyellow; } &lt;/style&gt; &lt;div class=&#34;container&#34;&gt; &lt;header part=&#34;header&#34;&gt;&lt;slot name=&#34;header&#34;&gt;&lt;/slot&gt;&lt;/header&gt; &lt;hr&gt; &lt;div part=&#34;body&#34;&gt;&lt;slot name=&#34;body&#34;&gt;&lt;/slot&gt;&lt;/div&gt; &lt;/div&gt; `; } }); &lt;/script&gt;</code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色,标有 <pre><code>part=&#34;header&#34;</code></pre> 的元素从外部设置为绿色,插入 <pre><code>slot=&#34;body&#34;</code></pre> 的内容从内部(shadow dom)设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种(受控)跨界样式? (例如,当使用 <pre><code>AppShell::part(content)</code></pre> 时,我收到错误:</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | &lt;style&gt; 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. &lt;div class=&#34;private-parent&#34;&gt; &lt;slot /&gt; &lt;/div&gt; &lt;style&gt; div.private-parent { color: blue; } &lt;/style&gt; </code></pre> <p>然后,您使用该组件:</p> <pre><code>&lt;script&gt; import Test from &#39;./Test.svelte&#39;; &lt;/script&gt; &lt;Test&gt; &lt;!-- This is the slot&#39;s content --&gt; &lt;p class=&#34;outside-style&#34;&gt;Hello!&lt;/p&gt; &lt;/Test&gt; &lt;style&gt; p.outside-style { color: darkred; } &lt;/style&gt; </code></pre> </answer> </body></html>


svelte:第一次加载时窗口内部宽度未定义

我有这个组件来检查设备大小 从“$lib/stores”导入{deviceSize}; 让内部宽度; $:如果(内部宽度> = 1652){ ...</desc> <question vote="0"> <p>我有这个组件来检查设备尺寸</p> <pre><code>&lt;script lang=&#34;ts&#34;&gt; import { deviceSize } from &#34;$lib/stores&#34;; let innerWidth; $: if (innerWidth &gt;= 1652) { $deviceSize = { xl: true, lg: false, md: false, dsm: false, sm: false, }; } else if (innerWidth &gt;= 1240 &amp;&amp; innerWidth &lt; 1652) { $deviceSize = { xl: false, lg: true, md: false, dsm: false, sm: false, }; } else if (innerWidth &gt;= 794 &amp;&amp; innerWidth &lt; 1240) { $deviceSize = { xl: false, lg: false, md: true, dsm: false, sm: false, }; } else if (innerWidth &gt;= 640 &amp;&amp; innerWidth &lt; 794) { $deviceSize = { xl: false, lg: false, md: false, dsm: true, sm: false, }; } else { $deviceSize = { xl: false, lg: false, md: false, dsm: false, sm: true, }; } $: console.log(innerWidth); &lt;/script&gt; &lt;svelte:window bind:innerWidth /&gt; </code></pre> <p>和像这样的应用程序组件</p> <p><App.svelte></p> <pre><code>&lt;script&gt; const { lg, xl } = $deviceSize; $: isDesktop = xl || lg; &lt;/script&gt; {#if isDesktop} &lt;DesktopComponent/&gt; {/if} {#if !isDesktop} &lt;MobileComponent/&gt; {/if} </code></pre> <p><a href="https://i.stack.imgur.com/6iNXn.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZpTlhuLnBuZw==" alt="enter image description here"/></a></p> <p>我的问题是innerWidth在初始加载中总是未定义。所以 isDesktop = false,那么即使我使用桌面,也始终渲染 MobileComponent。请帮我解决这个问题。</p> <p>我尝试为 <pre><code>deviceSize</code></pre> 商店设置默认值,但无法按我想要的方式工作,它始终呈现为我使用的任何设备(PC、移动设备)的默认条件。</p> </question> <answer tick="false" vote="0"> <p>根据<a href="https://svelte.dev/docs/svelte-components#:%7E:text=Reactive%20statements%20run%20after%20other%20script%20code%20and%20before%20the%20component%20markup%20is%20rendered%2C" rel="nofollow noreferrer">svelte 文档</a>:</p> <blockquote> <p>反应式语句在其他脚本代码之后、渲染组件标记之前运行</p> </blockquote> <p>意味着 if-else 块在创建 <pre><code>svelte:window</code></pre> 绑定之前运行一次,此时 <pre><code>innerWidth</code></pre> 未定义。</p> <p>为了避免这种情况,您可以将 <pre><code>innerWidth</code></pre> 初始化为正确的值,例如更换</p> <pre><code>let innerWidth; </code></pre> <p>与</p> <pre><code>let innerWidth = window.innerWidth; </code></pre> <p>也就是说,通过使用 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries" rel="nofollow noreferrer">CSS 媒体查询</a>(而不是 JavaScript)来显示和隐藏标记,您可能会让您的生活变得更轻松。</p> </answer> </body></html>


Django UserCreationForm 元字段

我创建了自定义的用户创建表单 类RegisterForm(用户创建表单): 类元: model = Users #personal 用户模型 字段 = ( “用户名”, ...


如何使用 JS 延迟加载新的 Google Adsense 代码

谷歌已取代 <question vote="1"> <p>谷歌已取代 <br/></p> <p><pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&lt;/script&gt;</code></pre> <br/></p> <p>与<br/></p> <p><pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456&#34; crossorigin=&#34;anonymous&#34;&lt;/script&gt;</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>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;ins class=&#34;adsbygoogle&#34; style=&#34;display:inline-block;width:350px;height:90px&#34; data-ad-client=&#34;ca-pub-XXXXXXXXXXXXXXXX&#34; data-ad-slot=&#34;XXXXXXXXXX&#34;&gt;&lt;/ins&gt; &lt;script&gt; (adsbygoogle = window.adsbygoogle || []).push({}); &lt;/script&gt; </code></pre> <p><strong>新的 Adsense 代码如下:</strong></p> <pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;ins class=&#34;adsbygoogle&#34; style=&#34;display:inline-block;width:350px;height:90px&#34; data-ad-client=&#34;ca-pub-XXXXXXXXXXXXXXXX&#34; data-ad-slot=&#34;XXXXXXXXXX&#34;&gt;&lt;/ins&gt; &lt;script&gt; (adsbygoogle = window.adsbygoogle || []).push({}); &lt;/script&gt; </code></pre> <p><strong>页面加载完成后加载广告的旧 JS 代码是:</strong></p> <pre><code> &lt;script type=&#34;text/javascript&#34;&gt; function downloadJSAtOnload() { var element = document.createElement(&#34;script&#34;); element.src = &#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener(&#34;load&#34;, downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent(&#34;onload&#34;, downloadJSAtOnload); else window.onload = downloadJSAtOnload; &lt;/script&gt; </code></pre> <p>由于在新广告代码的脚本标签中添加了<pre><code>?client=ca-pub-xxxxxx&#34; crossorigin=&#34;anonymous&#34;</code></pre>,那么现在加载广告的新JS代码是什么?</p> </question> <answer tick="true" vote="1"> <p>嗯,这并不是真正的延迟加载,这是延迟加载,不推荐,但你就可以了</p> <pre><code>&lt;script&gt; function downloadJSAtOnload() { var element = document.createElement(&#34;script&#34;); element.src = &#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX&#34;; element.async = true; element.setAttribute(&#39;crossorigin&#39;, &#39;anonymous&#39;); document.body.appendChild(element); } if (window.addEventListener) window.addEventListener(&#34;load&#34;, downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent(&#34;onload&#34;, downloadJSAtOnload); else window.onload = downloadJSAtOnload; &lt;/script&gt; </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>


HTML如何使用javascript清除输入?

我有这个输入,每次我们点击它里面的时候它都会被清除。 问题: 我只想在 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>&lt;script type=&#34;text/javascript&#34;&gt; function clearThis(target) { target.value= &#34;&#34;; } &lt;/script&gt; &lt;input type=&#34;text&#34; name=&#34;email&#34; value=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="9cf9e4f9f1ecf0f3dcf9e4f9f1ecf0f3b2fff3f1">[email protected]</a>&#34; size=&#34;30&#34; onfocus=&#34;clearThis(this)&#34;&gt; </code></pre> <p>有人可以帮我做到这一点吗? 我不知道如何比较,我已经尝试过但没有成功。</p> </question> <answer tick="true" vote="57"> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function clearThis(target) { if (target.value == &#39;<a href="/cdn-cgi/l/email-protection" data-cfemail="4a2f322f273a26250a2f322f273a262564292527">[email protected]</a>&#39;) { target.value = &#34;&#34;; } } &lt;/script&gt; </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>&lt;form id=&#34;myForm&#34;&gt; First name: &lt;input type=&#34;text&#34; name=&#34;fname&#34; value=&#34;Demo&#34;&gt;&lt;br&gt; Last name: &lt;input type=&#34;text&#34; name=&#34;lname&#34;&gt;&lt;br&gt;&lt;br&gt; &lt;input type=&#34;button&#34; onclick=&#34;myFunction()&#34; value=&#34;Reset form&#34;&gt; &lt;/form&gt; &lt;script&gt; function myFunction() { document.getElementById(&#34;myForm&#34;).reset(); } &lt;/script&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="4"> <p>您可以使用属性<pre><code>placeholder</code></pre></p> <pre><code>&lt;input type=&#34;text&#34; name=&#34;email&#34; placeholder=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="42273a272f322e2d02273a272f322e2d6c212d2f">[email protected]</a>&#34; size=&#34;30&#34; /&gt; </code></pre> <p>或者在旧版浏览器上尝试这个</p> <pre><code>&lt;input type=&#34;text&#34; name=&#34;email&#34; value=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="bdd8c5d8d0cdd1d2fdd8c5d8d0cdd1d293ded2d0">[email protected]</a>&#34; size=&#34;30&#34; onblur=&#34;if(this.value==&#39;&#39;){this.value=&#39;<a href="/cdn-cgi/l/email-protection" data-cfemail="aacfd2cfc7dac6c5eacfd2cfc7dac6c584c9c5c7">[email protected]</a>&#39;;}&#34; onfocus=&#34;if(this.value==&#39;<a href="/cdn-cgi/l/email-protection" data-cfemail="03667b666e736f6c43667b666e736f6c2d606c6e">[email protected]</a>&#39;){this.value=&#39;&#39;;}&#34;&gt; </code></pre> </answer> <answer tick="false" vote="4"> <p>您可以使用占位符,因为它可以为您做到这一点,但对于不支持占位符的旧浏览器,请尝试以下操作:</p> <pre><code>&lt;script&gt; function clearThis(target) { if (target.value == &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="402538252d302c2f002538252d302c2f6e232f2d">[email protected]</a>&#34;) { target.value = &#34;&#34;; } } function replace(target) { if (target.value == &#34;&#34; || target.value == null) { target.value == &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="73160b161e031f1c33160b161e031f1c5d101c1e">[email protected]</a>&#34;; } } &lt;/script&gt; &lt;input type=&#34;text&#34; name=&#34;email&#34; value=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="ddb8a5b8b0adb1b29db8a5b8b0adb1b2f3beb2b0">[email protected]</a>&#34; size=&#34;x&#34; onfocus=&#34;clearThis(this)&#34; onblur=&#34;replace(this)&#34; /&gt; </code></pre> <p>代码说明:当文本框获得焦点时,清除该值。当文本框未聚焦且文本框为空时,替换值。</p> <p>我希望这有效,我一直遇到同样的问题,但后来我尝试了这个,它对我有用。</p> </answer> <answer tick="false" vote="0"> <p>试试这个:</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function clearThis(target){ if(target.value == &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="67021f020a170b0827021f020a170b084904080a">[email protected]</a>&#34;) { target.value= &#34;&#34;; } } &lt;/script&gt; </code></pre> <p></p> </answer> <answer tick="false" vote="0"> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function clearThis(target){ if (target.value === &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="a2c7dac7cfd2cecde2c7dac7cfd2cecd8cc1cdcf">[email protected]</a>&#34;) { target.value= &#34;&#34;; } } &lt;/script&gt; &lt;input type=&#34;text&#34; name=&#34;email&#34; value=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="c7a2bfa2aab7aba887a2bfa2aab7aba8e9a4a8aa">[email protected]</a>&#34; size=&#34;30&#34; onfocus=&#34;clearThis(this)&#34;&gt; </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>&lt;input type=&#34;text&#34; name=&#34;email&#34; placeholder=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="06637e636b766a6946637e636b766a692865696b">[email protected]</a>&#34; size=&#34;30&#34;&gt; </code></pre> <p>用占位符替换该值</p> </answer> <answer tick="false" vote="0"> <p>不要使用 <strong>placeholder</strong> 属性清除名称文本,这是一个很好的做法</p> <pre><code>&lt;input type=&#34;text&#34; placeholder=&#34;name&#34; name=&#34;name&#34;&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>我对所有这些答案感到惊讶,没有人提到最简单、现代的方法来做到这一点:</p> <pre><code>&lt;input type=&#34;text&#34; placeholder=&#34;Your Name&#34; onfocus=&#34;this.placeholder=&#39;&#39;&#34; onblur=&#34;this.placeholder=&#39;Your Name&#39;&#34; &gt; </code></pre> <p>仅当您想在用户单击远离输入后恢复原始占位符时,才需要 <pre><code>onblur</code></pre>。</p> </answer> </body></html>


标签错误:渲染时出现 React JSX 样式标签错误

这是我的反应渲染函数 渲染:函数(){ 返回 ( 某事 .rr{ 红色; ...</desc> <question vote="94"> <p>这是我的反应渲染函数</p> <pre><code>render:function(){ return ( &lt;div&gt; &lt;p className=&#34;rr&#34;&gt;something&lt;/p&gt; &lt;style&gt; .rr{ color:red; } &lt;/style&gt; &lt;/div&gt; ) } </code></pre> <p>这给了我这个错误</p> <blockquote> <p>JSX:错误:解析错误:第 22 行:意外的标记:</p> </blockquote> <p>这里出了什么问题? 我可以将完整的普通 CSS 嵌入到 React 组件中吗?</p> </question> <answer tick="false" vote="130"> <p>使用 es6 模板字符串(允许换行)很容易做到。在你的渲染方法中:</p> <pre><code>const css = ` .my-element { background-color: #f00; } ` return ( &lt;div className=&#34;my-element&#34;&gt; &lt;style&gt;{css}&lt;/style&gt; some content &lt;/div&gt; ) </code></pre> <p>至于用例,我正在为一个 div 执行此操作,其中包含一些用于调试的复选框,我希望将其包含在一个文件中,以便稍后轻松删除。</p> </answer> <answer tick="true" vote="73"> <p>JSX 只是 javascript 的一个小扩展,它不是自己完整的模板语言。所以你会像在 javascript 中那样做:</p> <pre><code>return ( &lt;div&gt; &lt;p className=&#34;rr&#34;&gt;something&lt;/p&gt; &lt;style&gt;{&#34;\ .rr{\ color:red;\ }\ &#34;}&lt;/style&gt; &lt;/div&gt; ) </code></pre> <p><a href="http://jsfiddle.net/r6rqz068/" rel="noreferrer">http://jsfiddle.net/r6rqz068/</a></p> <p>但是根本没有充分的理由这样做。</p> </answer> <answer tick="false" vote="30"> <p>内联样式最好直接应用于组件 JSX 模板:</p> <pre><code>return ( &lt;div&gt; &lt;p style={{color: &#34;red&#34;}}&gt;something&lt;/p&gt; &lt;/div&gt; ); </code></pre> <p>演示:<a href="http://jsfiddle.net/chantastic/69z2wepo/329/" rel="noreferrer">http://jsfiddle.net/chantastic/69z2wepo/329/</a></p> <hr/> <p><strong>注意:JSX 不支持 style 属性的 HTML 语法</strong></p> <p>使用驼峰式属性名称声明属性,例如,</p> <pre><code>{ color: &#34;red&#34;, backgroundColor: &#34;white&#34; } </code></pre> <p>进一步阅读此处:<a href="http://facebook.github.io/react/tips/inline-styles.html" rel="noreferrer">http://facebook.github.io/react/tips/inline-styles.html</a></p> </answer> <answer tick="false" vote="20"> <p>这可以通过使用反引号“`”来完成,如下所示</p> <pre><code>return (&lt;div&gt; &lt;p className=&#34;rr&#34;&gt;something&lt;/p&gt; &lt;style&gt;{` .rr{ color:red; } `}&lt;/style&gt; &lt;/div&gt;) </code></pre> </answer> <answer tick="false" vote="10"> <p>“class”是 JavaScript 中的保留字。而是使用“className”。</p> <p>此外,您必须记住您使用的是 JSX,而不是 HTML。我不相信 jsx 会解析你的标签。更好的方法是使用您的样式创建一个对象,然后将其应用为样式(见下文)。</p> <pre><code>var styles = { color:&#34;red&#34;; } return ( &lt;div&gt; &lt;p style={styles}&gt;something&lt;/p&gt; &lt;/div&gt; ) </code></pre> </answer> <answer tick="false" vote="8"> <ol> <li>创建一个函数来处理插入样式标签。</li> <li>将所需的 CSS 添加到字符串变量中。</li> <li><p>将变量添加到 <pre><code>&lt;style&gt;</code></pre> 标记内返回的 JSX。</p> <pre><code>renderPaypalButtonStyle() { let styleCode = &#34;#braintree-paypal-button { margin: 0 auto; }&#34; return ( &lt;style&gt;{ styleCode }&lt;/style&gt; ) } </code></pre></li> </ol> </answer> <answer tick="false" vote="4"> <p>这就是我所做的:</p> <pre><code>render(){ var styleTagStringContent = &#34;.rr {&#34;+ &#34;color:red&#34;+ &#34;}&#34;; return ( &lt;style type=&#34;text/css&#34;&gt; {styleTagStringContent} &lt;/style&gt; ); </code></pre> </answer> <answer tick="false" vote="0"> <p>经过一番摸索和尝试,终于找到了解决方案。 关键是危险的SetInnerHTML。 代码如下:</p> <pre><code> &lt;script src=&#34;https://pie-meister.github.io/PieMeister-with Progress.min.js&#34;&gt;&lt;/script&gt; import React from &#39;react&#39; const style = ` &lt;pie-chart class=&#34;nested&#34; offset=&#34;top&#34;&gt; &lt;style&gt; path { stroke-linecap: round; stroke-width: 90; } [color1] { stroke: #BFBDB2; stroke-width: 50; } [color2] { stroke: #26BDD8; stroke-width: 60; } [color3] { stroke: #824BF1; } [part=&#34;path&#34;]:not([y]) { stroke: #BFBDB2; stroke-width: 60; opacity: 0.4; } &lt;/style&gt; &lt;slice color1 size=&#34;100%&#34; radius=&#34;200&#34;&gt;&lt;!--No label--&gt;&lt;/slice&gt; &lt;slice color1 size=&#34;88%&#34; radius=&#34;200&#34; y=&#34;65&#34;&gt;&lt;tspan&gt; $size&lt;/tspan&gt;&lt;/slice&gt; &lt;slice color2 size=&#34;100%&#34; radius=&#34;100&#34;&gt; &lt;/slice&gt; &lt;slice color2 size=&#34;40%&#34; radius=&#34;100&#34; y=&#34;165&#34;&gt;&lt;tspan&gt; $size&lt;/tspan&gt;&lt;/slice&gt; &lt;slice color3 size=&#34;100%&#34; radius=&#34;0&#34;&gt; &lt;/slice&gt; &lt;slice color3 size=&#34;10%&#34; radius=&#34;0&#34; y=&#34;265&#34;&gt;&lt;tspan&gt; $size&lt;/tspan&gt;&lt;/slice&gt; &lt;/pie-chart&gt;` export default function Styles() { return ( &lt;div dangerouslySetInnerHTML={{__html:style}}/&gt; ) } </code></pre> </answer> <answer tick="false" vote="-3"> <pre><code>import styled from &#39;styled-components; return ( &lt;div&gt; &lt;Test&gt;something&lt;/Test&gt; &lt;/div&gt; ) </code></pre> <p>下一步:</p> <pre><code>const Test = styled.p` color: red `; </code></pre> </answer> </body></html>


如何决定torchsummary.summary(model=model.policy, input_size=(int, int, int))的'input_size'参数?

这是我的 CNN 网络,由“print(model.policy)”打印: CNN政策( (演员): 演员( (features_extractor): CustomCNN( (cnn): 顺序( (0): Conv2d(1, 32, kernel_size=(3, 3), st...


为什么 svelte 派生存储总是在 get() 上重新创建?

现在我想这更针对 Svelte 作者,但我最近才完全意识到派生商店是在获取时不断重新创建的。 例子 导入{导出、获取、写入...</desc> <question vote="0"> <p>现在我想这更针对 Svelte 作者,但我最近才完全意识到派生商店会在 <pre><code>get</code></pre> 上不断重新创建。</p> <p><a href="https://svelte.dev/repl/142e6716b65647f69f660613b39d0386?version=4.2.12" rel="nofollow noreferrer">示例</a></p> <pre><code>&lt;script&gt; import { derived, get, writable } from &#39;svelte/store&#39; const store = writable(0) const derivedA = derived(store, s =&gt; { console.log(&#39;derivedA recreated!&#39;) return { name: &#39;A&#39;, s } }) const derivedB = derived(derivedA, d =&gt; { console.log(&#39;derivedB recreated!&#39;) return { name: &#39;B&#39;, s: d.s } }) function getB() { console.log(get(derivedB)) } &lt;/script&gt; &lt;section class=&#34;mx-4 md:mx-0&#34;&gt; &lt;button on:click={getB}&gt;GetB&lt;/button&gt; &lt;/section&gt; </code></pre> <p>我认为它们只会在输入发生变化时才会重新创建 - 而不是每次调用 <pre><code>get</code></pre> 时都会重新创建。特别奇怪的是,如果派生存储被链接,则整个树都会被遍历。我假设 <pre><code>get</code></pre> 返回了对值的引用,当然,如果你那么愚蠢,你可能会变异并导致各种错误。</p> <p>我确实知道派生存储应该始终为相同的输入返回完全相同的值,但是如果<em>某人</em>没有时间深入思考它,则依赖于派生存储仅在原始存储更改时重新计算它会导致相当奇怪的错误。</p> </question> <answer tick="true" vote="1"> <p>来自文档</p> <blockquote> <p>从一个或多个其他商店派生出一个商店。 <strong>回调最初在第一个订阅者订阅时运行</strong>,然后每当存储依赖项发生变化时运行。</p> </blockquote> <blockquote> <p>...您可能需要检索您未订阅的商店的值。 <strong>get</strong> 允许您这样做。 <strong>这可以通过创建订阅</strong>、读取值,然后取消订阅来实现。</p> </blockquote> <p>在您的示例中,派生值未在任何地方使用,因此调用 <pre><code>get</code></pre> 创建第一个订阅者。添加时</p> <pre><code>{$derivedA} {$derivedB} </code></pre> <p>日志将在组件初始化时运行,而在调用 <pre><code>get</code></pre></p> 时不再运行 </answer> </body></html>


如何在VUE中使用参数访问v-model值

我想使用参数访问 v-model 值,我尝试下面的代码 我想使用参数访问 v-model 值,我尝试下面的代码 <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click="submitTest(item)"> testbtn </button> </div> </template> <script setup> var data = {'test1': 'val1', 'test2': 'val2'} function submitTest(itemParam){ alert(itemParam.value) } </script> 实际上在submitTest函数(警报行)中,它不访问输入标签v-model,而是访问itemParam(字符串值本身)值。我想要的是使用由项目参数传递的参数访问输入“项目值”。 我尝试了上面的代码,结果,它实际上访问了“itemParam”字符串值本身,而不是传递参数。 在Vue.js中,您应该使用v-model进行双向数据绑定。 v-model 指令是绑定数据以形成输入并更新用户输入数据的便捷简写。但是,它不能直接用作 prop 或作为参数传递。相反,您可以传递整个对象并在方法中使用它。 以下是修改代码的方法: <template> <div v-for="(item, idx) in data" :key="idx"> <input :id="item" v-model="item.value"></input> <button @click="submitTest(item)">testbtn</button> </div> </template> <script setup> const data = ref([ { id: 'input1', value: '' }, { id: 'input2', value: '' }, // ... other items ]); function submitTest(item) { alert(item.value); } </script> 在此示例中,数据数组中的每个项目都是一个具有 id 和 value 属性的对象。 v-model 指令绑定到 item.value。当您单击按钮时,将使用整个项目对象调用 SubmitTest 函数,您可以从那里访问 value 属性。 确保在设置脚本中使用 ref 创建对数据数组的反应性引用。 注意: :key="idx" 添加到 中,为循环中的每个项目提供唯一的键。这有助于 Vue.js 在数组更改时高效更新和重新渲染组件。


使用 Whisper AI 转录时出现打字错误

我想使用 Whisper AI 转录音频文件。 我从一篇文章中学到了https://www.assembleai.com/blog/how-to-run-openais-whisper-speech-recognition-model/ 使用 python 版本 3.8....


将多个对象添加到另一个对象

我一直在开发本教程中制作的应用程序版本(https://learn.microsoft.com/pl-pl/aspnet/core/data/ef-rp/complex-data-model?view =aspnetcore-5.0&tabs=visual-studio)。我有


Autodesk Model Derivative API:使用 exportSettingsName 选项将 Revit 转换为 IFC 不会在 2023 文件中创建 PSET

我正在使用模型衍生 API 将 Revit 文件 (.rvt) 转换为 IFC (.ifc) 文件。我正在设置属性,如


Google 识别的 JSON LD 格式的 Schema.org,但 Facebook Pixel Helper 无法检测到它

我使用添加了JSON LD格式的schema.org标签,当我使用Google结构化数据测试工具测试我的页面时,我可以看到我的所有标签。 但是,当我安装 Facebook Pixel Helper 时 </desc> <question vote="15"> <p>我使用<pre><code>JSON LD</code></pre>以<pre><code>&lt;script&gt;</code></pre>格式添加了schema.org标签,当我使用<a href="https://search.google.com/structured-data/testing-tool/u/0/" rel="noreferrer">Google结构化数据测试工具</a>测试我的页面时,我可以看到我的所有标签。</p> <p>但是,当我安装 <a href="https://chrome.google.com/webstore/detail/facebook-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?hl=en" rel="noreferrer">Facebook Pixel helper chrome 扩展</a> 来测试我的页面时,schema.org 标签显示为空白。不知道为什么 Facebook Pixel Helper 无法检测到它。</p> <p>非常感谢任何帮助。</p> </question> <answer tick="false" vote="9"> <p>我发现Facebook Pixel对结构化数据的解析更加严格。字段中的空白换行将导致它发出警告。当我在地址中进行换行时,我就发生了这种情况。谷歌正确解释了该地址,但 Facebook Pixel 在控制台中发出了警告。</p> <p>添加以下代码解决了我的情况:</p> <pre><code>$address = preg_replace( &#34;/\r|\n/&#34;, &#34; &#34;, $address ); </code></pre> <p>当然,正如这里指出的那样<a href="https://stackoverflow.com/questions/2392766/multiline-strings-in-json">JSON不支持真正的换行符</a>。</p> </answer> <answer tick="false" vote="3"> <p>聚会迟到了,但对于来这里的人来说仍然如此。 FB Pixel 现在支持 JSON-LD:<a href="https://www.facebook.com/business/help/1175004275966513" rel="nofollow noreferrer">https://www.facebook.com/business/help/1175004275966513</a></p> </answer> <answer tick="false" vote="3"> <p>对我来说,多个空格都有错误(据我所知)。 <br/>因此,我使用这段代码:</p> <pre><code>$description = preg_replace(&#34;#\r|\n|(\s+)#iu&#34;, &#34; &#34;, $description); </code></pre> </answer> <answer tick="false" vote="0"> <p>JSON 扩展还为所有其他网页添加了 JSON-LD 格式的架构标记,这是 Google 喜欢的。 “Facebook Pixel”不读取架构元标签或 JSON-LD(Pinterest 读取架构元标签,但不读取 JSON-LD)。</p> <p>听起来您可能有点困惑 – Facebook 不读取架构标记 – Facebook 读取开放图元标签。您可以在这里找到该标准的详细信息:<a href="http://ogp.me/" rel="nofollow noreferrer">http://ogp.me/</a>。</p> <p>仅供参考 <a href="https://www.withintheflow.com/facebook-pixel-helper/" rel="nofollow noreferrer">https://www.withintheflow.com/facebook-pixel-helper/</a></p> </answer> <answer tick="false" vote="0"> <p>您可能碰巧在 init 调用中有 <pre><code>fbq(&#39;set&#39;, &#39;autoConfig&#39;, &#39;false&#39;)</code></pre>。 </p> <p>Facebook Pixel 会将元数据发送到您的 Pixel 设置,但在初始化代码中,如果您将 <pre><code>autoConfig</code></pre> 设置为 <pre><code>false</code></pre>,Facebook Pixel 将不会发送此附加信息。</p> </answer> <answer tick="false" vote="0"> <p>我还使用 Json-LD 脚本标签。就我而言,实际上是在标签开始发送此数据之前移动 Facebook 像素脚本!</p> </answer> </body></html>


ESLint:解析错误:意外的标记:

大家好我正在将我的 vue3 项目从 js 迁移到 typescript,我遇到了这个问题: 这是我在 .vue 文件中的代码 const toto = (msg: string) => { </desc> <question vote="7"> <p>大家好,我正在将我的 vue3 项目从 js 迁移到 typescript,我遇到了这个问题:</p> <p><a href="https://i.stack.imgur.com/y5tG8.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3k1dEc4LnBuZw==" alt=""/></a></p> <p>这是我在 .vue 文件中的代码</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; const toto = (msg: string) =&gt; { console.log(msg) } &lt;/script&gt; </code></pre> <p>这是我的 eslintrc.js</p> <pre><code>module.exports = { &#39;env&#39;: { &#39;browser&#39;: true, &#39;es2021&#39;: true }, &#39;extends&#39;: [ &#39;eslint:recommended&#39;, &#39;plugin:vue/vue3-essential&#39; ], &#39;parserOptions&#39;: { &#39;ecmaVersion&#39;: 13, &#39;sourceType&#39;: &#39;module&#39; }, &#39;plugins&#39;: [ &#39;vue&#39; ], &#39;rules&#39;: { &#39;vue/multi-word-component-names&#39;: &#39;off&#39;, &#39;vue/object-curly-spacing&#39;: [2, &#39;always&#39;], &#39;vue/html-closing-bracket-spacing&#39;: [2, { &#39;selfClosingTag&#39;: &#39;always&#39; }], &#39;vue/max-attributes-per-line&#39;: [2, { &#39;singleline&#39;: { &#39;max&#39;: 1 }, &#39;multiline&#39;: { &#39;max&#39;: 1 } }], &#39;semi&#39;: [2, &#39;never&#39;] } } </code></pre> </question> <answer tick="true" vote="10"> <p>您需要配置 eslint 以支持 typescript,因为 eslint 不支持开箱即用。 首先,您需要安装<a href="https://www.npmjs.com/package/@typescript-eslint/parser" rel="nofollow noreferrer">@typescript-eslint/parser</a>,然后安装<a href="https://www.npmjs.com/package/@typescript-eslint/eslint-plugin" rel="nofollow noreferrer">@typescript-eslint/eslint-plugin</a>。 安装完这些后,请按如下方式更新您的配置 - </p> <pre><code>module.exports = { &#39;env&#39;: { &#39;browser&#39;: true, &#39;es2021&#39;: true, node: true }, &#39;extends&#39;: [ &#39;eslint:recommended&#39;, &#39;plugin:vue/vue3-essential&#39; ], &#39;parserOptions&#39;: { &#39;ecmaVersion&#39;: 12, &#39;sourceType&#39;: &#39;module&#39;, parser: &#39;@typescript-eslint/parser&#39; }, &#39;plugins&#39;: [ &#39;vue&#39;, &#39;@typescript-eslint&#39; ], &#39;rules&#39;: { &#39;vue/multi-word-component-names&#39;: &#39;off&#39;, &#39;vue/object-curly-spacing&#39;: [2, &#39;always&#39;], &#39;vue/html-closing-bracket-spacing&#39;: [2, { &#39;selfClosingTag&#39;: &#39;always&#39; }], &#39;vue/max-attributes-per-line&#39;: [2, { &#39;singleline&#39;: { &#39;max&#39;: 1 }, &#39;multiline&#39;: { &#39;max&#39;: 1 } }], &#39;semi&#39;: [2, &#39;never&#39;] } } </code></pre> </answer> <answer tick="false" vote="1"> <p>就我而言,问题是我使用解析器选项作为数组,而不是字符串:</p> <pre><code> parserOptions: { - parser: [&#39;@typescript-eslint/parser&#39;], + parser: &#39;@typescript-eslint/parser&#39;, }, </code></pre> </answer> <answer tick="false" vote="0"> <p>如果你在项目中同时使用 JS 和 TS,此配置有帮助</p> <pre><code> overrides: [ { files: [&#39;*.vue&#39;], parser: &#39;svelte-eslint-parser&#39;, parserOptions: { parser: { // Specify a parser for each lang. ts: &#39;@typescript-eslint/parser&#39;, js: &#39;espree&#39;, typescript: &#39;@typescript-eslint/parser&#39; } } } ], </code></pre> </answer> <answer tick="false" vote="-1"> <p>我在节点 v12.22.9 上遇到了这个问题。通过升级到 v14.21.2,我不再遇到解析错误。您可以使用命令升级/安装</p> <pre><code>nvm install v14.21.2 </code></pre> </answer> </body></html>


Laravel 动态扩展或使用 Traits

可以在运行时扩展或使用不同的类吗? 例子: 假设我们有一个名为 Player 的模型(我们的 A 模型) 可以在运行时扩展或使用不同的类吗? 示例: 假设我们有一个 model 称为 Player(我们的 A 模型) <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; class Player extends Model{ } 我们还有另外 2 个型号(B 和 C 型号) <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; protected $connection= 'db_b'; class PlayerInfoB extends Model{ function getName(){ return $this->name; } } 我们的C型号 <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; protected $connection= 'db_c'; class PlayerInfoC extends Model{ function getName(){ return $this->name_g; } } 模型A (Player)如何在运行时根据配置或其他数据扩展Model B or C 为什么我需要这个。 我有 2 个或更多不同的表,这些表的列有不同的名称,例如: Table 1 - name Table 2 - name_g Table 3 - name_full 所以我需要一个可以随时调用的包装器getName(),而无需检查现在使用的表。 $player = Player::get(); echo $player->getName(); 如果有不清楚的地方,请评论,我会更新我的问题。 更新基于madalin-ivascu答案可以这样完成吗? class Player extends Model{ protected $model; public function __construct(){ $this->setModel(); parent::__construct(); } protected function setModel(){ $this->model = $this->column_model_name } function getAttributeName(){ return $this->model->getName(); } } 如果不使用 eval 或 dirty hacks,就不可能在运行时编写一个类。您必须重新考虑您的类设计,因为您不太可能需要通过良好的设计来做到这一点。 您可以做的是使用方法 setTable 和 on: 在运行时更改模型实例上的表和数据库连接 Player::on('db_b')->setTable('player_info_b')->find($id); 另一种方法(首选)是定义模型 PlayerInfoC 和 PlayerInfoB 来扩展您的 Player 模型,然后根据您的情况在需要时实例化类 B 或 C。 在您的代码中,您的脚本必须具有您检查的状态,以便知道何时使用正确的模型? 既然如此,为什么不在 get name 中使用参数呢? class Player extends Model{ function getName($field){ return isset($this->{$field}) ? $this->{$field} : null; } } 如果你经常这样做,那么使用魔法方法: class Player extends Model{ function __get($key){ return isset($this->{$field}) ? $this->{$field} : null; } } ... echo $myModelInstance->{$field}; http://php.net/manual/en/language.oop5.overloading.php#object.get 在 Laravel 中,当你通过集合方法拉回数据时,它无论如何都会执行这个神奇的方法,因为所有属性都存储在称为属性的嵌套对象中,因此 __set() 和 __get() 看起来像这样: function __get($key){ return isset($this->attributes->{$key}) ? $this->attributes->{$key} : null; } function __set($key, $value){ return $this->attributes->{$key} = $value; } 建议后者带有属性子集,这样可以防止数据与返回的数据库列名称与模型中已使用的名称发生冲突。 这样,您只需在创建的每个模型中将一个属性名称作为保留名称进行管理,而不必担心您使用的数百个 var 名称会覆盖模型或模型扩展中的另一个属性名称。 使用该模型值来调用函数 $player = Player::get(); echo Player::getName($player->id,'PlayerInfoC'); 在 Player 模型中您只需调用 public static function getName($id,$class) return $class::where('player_id',$id)->getName();//each class will have the function } ps:您需要进行一些验证来测试该名称是否存在 另一种选择是在模型之间创建关系 您可以在模型中使用与以下相同的启动方法来执行此操作: protected static function booted() { if (<--your condition-- >) { $traitInitializers[static::class][] = 'boot' . ExampleTrait::class; $traitInitializers[static::class][] = 'boot' . Organizations::class; } }


无法为版本化模型创建捆绑包文件夹?

我收到了其他开发商的项目。然后我在 Xcode 中打开 iOS 项目并构建它,我收到如下错误: 卷/Macintosh D/我的工作区/HCProject/Model/HealthCareModel.xcdatamodeld:0: 错误...


在仪表针中设置弹出框(Echarts)

我有这段代码,我尝试将鼠标悬停在第一个仪表针上以获取 .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> &lt;head&gt; &lt;script src=&#34;https://code.jquery.com/jquery-3.6.4.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&#34;&gt; &lt;title&gt;Gauge Chart&lt;/title&gt; &lt;/head&gt; &lt;button id=&#39;btn1&#39;&gt; Let&#39;s &lt;/button&gt; &lt;input id=&#39;slider1&#39; type=&#39;range&#39; value=&#39;34&#39; min=&#39;0&#39; max=&#39;100&#39; step=&#39;.01&#39;&gt; &lt;input id=&#39;slider2&#39; type=&#39;range&#39; value=&#39;89&#39; min=&#39;0&#39; max=&#39;100&#39; step=&#39;.01&#39;&gt; &lt;div id=&#39;chartid1&#39; style=&#39;width:390px; height: 410px;&#39;&gt;&lt;/div&gt; &lt;script&gt; const chart1 = echarts.init(document.getElementById(&#39;chartid1&#39;)); function update1(value1, value2) { option = { series: [{ type: &#39;gauge&#39;, min: 0, max: 100, splitNumber: 10, detail: { fontFamily: &#39;Lato&#39;, fontSize: 14, borderWidth: 1, borderColor: &#39;#020202&#39;, borderRadius: 5, width: 32, height: 20 }, data: [{ value: value1, name: &#39;False&#39;, itemStyle: { color: &#39;#dd4b50&#39; }, title: { offsetCenter: [&#39;-20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;-20%&#39;, &#39;36%&#39;], backgroundColor: &#39;#dd4b50&#39;, color: &#39;#f2f2f2&#39; } }, { value: value2, name: &#39;True&#39;, itemStyle: { color: &#39;#3a9e4b&#39; }, title: { offsetCenter: [&#39;20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;20%&#39;, &#39;36%&#39;], color: &#39;#f2f2f2&#39;, backgroundColor: &#39;#3a9e4b&#39; } } ] }] }; chart1.setOption(option); } function update2() { let value1 = Number($(&#39;#slider1&#39;).val()); let value2 = Number($(&#34;#slider2&#34;).val()); update1(value1, value2); } update2(); document.getElementById(&#39;btn1&#39;).addEventListener(&#39;click&#39;, function() { update2(); }) /// clickable chart1.on(&#39;mouseenter&#39;, {dataIndex:0}, function(params) { $(this).popover({ html: true, sanitize: false, title: &#39;Title &#39;, content: &#39;This a text&#39;, trigger: &#39;hover&#39;, placement: &#39;top&#39;, container: &#39;body&#39; }) }) &lt;/script&gt;</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: &#39;gauge&#39;, min: 0, max: 100, splitNumber: 10, detail: { fontFamily: &#39;Lato&#39;, fontSize: 14, borderWidth: 1, borderColor: &#39;#020202&#39;, borderRadius: 5, width: 32, height: 20 }, data: [ { value: 34, name: &#39;False&#39;, itemStyle: { color: &#39;#dd4b50&#39; }, title: { offsetCenter: [&#39;-20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;-20%&#39;, &#39;36%&#39;], backgroundColor: &#39;#dd4b50&#39;, color: &#39;#f2f2f2&#39; } }, { value: 89, name: &#39;True&#39;, itemStyle: { color: &#39;#3a9e4b&#39; }, title: { offsetCenter: [&#39;20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;20%&#39;, &#39;36%&#39;], color: &#39;#f2f2f2&#39;, backgroundColor: &#39;#3a9e4b&#39; } } ] } ] }; myChart.on(&#39;mouseover&#39;, {dataIndex: 0}, function(params) { console.log(params); }); </code></pre> </answer> </body></html>


Vue:带有 v-model 的代理框架组件

我想要代理,它以可以与 Dayjs(我们在整个应用程序中使用)一起使用的方式公开基于日期的 v 模型。我怎样才能实现这个目标?我正在使用最新的 Vu...


回归问题中的精度和准确度相当于什么?

我使用多层感知器神经网络解决了回归问题。我听说过 MSE、RMASE、MAE 和 R^2 指标。我想确切地知道哪个指标等于或类似于 pre...


耶拿有没有办法看到OntClass来自导入的本体?

我有一个导入 bfo 的本体。在我的测试用例中,我只有一个类,它是实体的子类: 我有一个导入bfo的本体。在我的测试用例中,我只有一个类,它是 entity: 的子类 <rdf:RDF xmlns="http://my.ontology/ontologyTest#" xml:base="http://my.ontology/ontologyTest" xmlns:da="http://my.ontology/ontologyTest#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:obo="http://purl.obolibrary.org/obo/" xmlns:owl="http://www.w3.org/2002/07/owl#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:terms="http://purl.org/dc/terms/"> <owl:Ontology rdf:about="http://my.ontology/ontologyTest"> <owl:imports rdf:resource="http://purl.obolibrary.org/obo/bfo/2019-08-26/bfo.owl"/> </owl:Ontology> <owl:Class rdf:about="http://my.ontology/ontologyTest#Event"> <rdfs:subClassOf rdf:resource="http://purl.obolibrary.org/obo/BFO_0000001"/> </owl:Class> </rdf:RDF> 当我打开本体时,我正在做: OntModel model = createModel("OWL_MEM"); FileManager.get().readModel(model, uri.toString()); Model _model = model.getRawModel(); model = new OntModelImpl(OntModelSpec.OWL_MEM, _model); ExtendedIterator classes = model.listClasses(); while (classes.hasNext()) { OntClass theOwlClass = (OntClass) classes.next(); if (thisClass.getNameSpace() == null && thisClass.getLocalName() == null) { continue; } ... } 我从我的本体中获取所有类(这里是Event),也从导入的本体中获取。 Jena 有没有办法知道 OntClass 是来自导入的本体并且未在我当前的本体中声明? 正如 UninformedUser 的评论中所说,感谢他,您可以执行以下操作: 列出所有导入本体的URI model.listImportedOntologyURIs() 列出导入本体的所有类model.getImportedModel(uri).listClasses() 在模型的所有类上创建一个迭代器,删除所有导入的类model.listClasses().filterDrop(importedClasses::contains) 因此,要打印模型的所有类而无需导入类: import java.util.HashSet; import java.util.Set; import org.apache.jena.ontology.OntClass; import org.apache.jena.ontology.OntModel; import org.apache.jena.ontology.OntModelSpec; import org.apache.jena.rdf.model.ModelFactory; import org.apache.jena.util.iterator.ExtendedIterator; OntModel model = ModelFactory.createOntologyModel(OntModelSpec.OWL_DL_MEM); model.read("file:///Users/von/tools/data.owl", "RDF/XML"); Set<OntClass> importedClasses = new HashSet<>(); for (String uri : model.listImportedOntologyURIs()) { importedClasses.addAll(model.getImportedModel(uri).listClasses().toSet()); } ExtendedIterator<OntClass> it = model.listClasses().filterDrop(importedClasses::contains); while (it.hasNext()) { OntClass cls = it.next(); System.out.println(cls); }


如何在声音播放时使图像改变风格或模糊并在声音结束时恢复到原始状态?

看这个简单的代码 音频{显示:无;} 图像{ 宽度:25px; 内容:url(mybutton.png); } 图像:悬停{ 光标:指针; } 功能...</desc> <question vote="-1"> <p>看这个简单的代码</p> <pre><code>&lt;head&gt; &lt;style&gt; audio { display:none;} img { width: 25px; content:url(mybutton.png); } img:hover { cursor: pointer; } &lt;/style&gt; &lt;script&gt; function playSound (mysound) { let theSound = new Audio(mysound); theSound.play(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;img onclick=&#34;playSound(&#39;ch.m4a&#39;)&#34; /&gt; &lt;/body&gt; </code></pre> <p><strong>我想要一个非常简单的CSS或JavaScript代码</strong>可以做到这些:</p> <p>-单击图像时,它会改变样式或变得模糊或更改为另一张图像。然后,声音开始播放。</p> <p>-当声音停止播放时,图像变回原来的状态。</p> <p><strong>我们可以使用非常简单的代码来做到这一点吗?</strong></p> </question> <answer tick="false" vote="0"> <p>您可以向音频添加事件侦听器并在其中应用 css 更改</p> <pre><code>function playSound (mysound) { let theSound = new Audio(mysound); theSound.addEventListener(&#39;ended&#39;, function() { alert(&#39;Audio finished playing!&#39;); }); theSound.play(); } </code></pre> </answer> </body></html>


在 HTML 文档中嵌入 TypeScript 代码

是否可以在网页中嵌入 TypeScript 代码?我想将 TypeScript 代码嵌入到脚本标签中,如下所示(以便它自动编译为 Javascript): <p>是否可以在网页中嵌入 TypeScript 代码?我想将 TypeScript 代码嵌入到脚本标签中,如下所示(以便它自动编译为 Javascript):</p> <pre><code>&lt;script type = &#34;text/typescript&#34;&gt; //TypeScript code goes here &lt;/script&gt; </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>&lt;script type=&#34;text/typescript&#34;&gt; // Your TypeScript code here &lt;/script&gt; </code></pre> <p>并包含依赖项。</p> <pre><code>&lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="67131e17021404150e1713275249544954">[email protected]</a>&#34;&gt;&lt;/script&gt; &lt;script defer src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="3743524f431a434e47524454455e4743770619041907">[email protected]</a>&#34;&gt;&lt;/script&gt; </code></pre> <p>一个完整的示例,您可以复制/粘贴到 HTML 文档中并在本地尝试。</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;meta charset=&#34;utf-8&#34; /&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34; /&gt; &lt;title&gt;&#34;text/typescript&#34; example&lt;/title&gt; &lt;meta name=&#34;description&#34; content=&#34;Transpiling and executing TypeScript in the browser&#34; /&gt; &lt;style&gt; body { overflow: hidden; margin: 0px; font-size: 15vw; } &lt;/style&gt; &lt;script type=&#34;text/typescript&#34;&gt; function foo(bar: string) { return &#34;Hello &#34; + bar; } let baz = &#34;World!&#34;; document.getElementById(&#34;root&#34;).innerHTML = foo(baz); &lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="13676a63766070617a636753263d203d20">[email protected]</a>&#34;&gt;&lt;/script&gt; &lt;script defer src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="ec98899498c198959c899f8f9e859c98acddc2dfc2dc">[email protected]</a>&#34;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;root&#34;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </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>


如何在Python中连接两个数据框/数组,其中每行必须具有相同的键? [重复]

我有两个 CSV 文件: 索引,X,Y 1,1.0,2.0 3,1.3,2.3 和 指数,Z 1,3.0 我想在 Python 中读取并连接到 m x 4 numpy 数组 规则是只有索引为 pre...的行


Javascript 函数 openFullscreen() ,如何让它在页面上的多个 iframe 上工作

在页面上我有一个 iframe,src 中有 *.pdf 文件。 <p>在页面上我有一个 iframe,src 中有 *.pdf 文件。</p> <pre><code>&lt;div class=&#34;node--view-mode-full&#34;&gt; &lt;p&gt;&lt;iframe allow=&#34;fullscreen&#34; allowfullscreen=&#34;&#34; frameborder=&#34;0&#34; height=&#34;980&#34; scrolling=&#34;no&#34; src=&#34;https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf&#34; width=&#34;660&#34;&gt;&lt;/iframe&gt;&lt;/p&gt; &lt;p&gt;&lt;iframe allow=&#34;fullscreen&#34; allowfullscreen=&#34;&#34; frameborder=&#34;0&#34; height=&#34;980&#34; scrolling=&#34;no&#34; src=&#34;https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf&#34; width=&#34;660&#34;&gt;&lt;/iframe&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <p>浏览器中内置的 pdf 查看器现在不支持 iframe 中的全屏模式。</p> <p>我找到了解决方案<a href="https://www.w3schools.com/howto/howto_js_fullscreen.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_fullscreen.asp</a>,解决了问题 - 以全屏模式打开 iframe。在 w3schools 的示例中,打开 iframe 的按钮已存在于 HTML <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen</a>.</p> <p>在我的解决方案中,我通过 javascript 添加按钮,因为带有 iframe 的页面已经存在,但没有此类按钮:</p> <pre><code>jQuery(document).ready(function($){ $(&#34;.node--view-mode-full iframe[src*=&#39;.pdf&#39;]&#34;).each(function (index) { $(this).addClass(&#39;fullscreenframe&#39;); $(this).attr(&#39;id&#39;, &#39;fullscreen-&#39;+index); $(&#39;&lt;button onclick=&#34;openFullscreen()&#34;&gt;Open in Fullscreen Mode&lt;/button&gt;&amp;nbsp;&lt;strong&gt;Tip:&lt;/strong&gt; Press the &#34;Esc&#34; key to exit full screen.&lt;br&gt;&#39;).insertBefore(this); }); }); </code></pre> <p>然后添加一个全屏打开 iframe 的功能(与 w3schools 相同):</p> <pre><code>function openFullscreen() { var elem = document.getElementsByClassName(&#34;fullscreenframe&#34;)[0]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } }; </code></pre> <p>当页面上只有一个带有 *.pdf 的 iframe 时,Everysing 工作正常。但是,当我在页面上有两个或多个 iframe,并且单击任何 iframe 附近的“以全屏模式打开”任何按钮时,我总是在全屏模式下只看到第一个 *.pdf...</p> <p>我知道,这是因为我只得到 elem = document.getElementsByClassName("fullscreenframe")[0]; 中的第一个 iframe;</p> <p>我知道我需要使用类似的每个或类似的东西,但我无法解决它。在搜索关于页面上一个全屏元素的所有解决方案时,没有关于页面上多个元素的解决方案...谢谢。</p> </question> <answer tick="true" vote="0"> <p>也许是这样的:</p> <pre><code>jQuery(document).ready(function($){ $(&#34;.node--view-mode-full iframe[src*=&#39;.pdf&#39;]&#34;).each(function (index) { $(this).addClass(&#39;fullscreenframe&#39;); $(this).attr(&#39;id&#39;, &#39;fullscreen-&#39;+index); $(&#39;&lt;button onclick=&#34;openFullscreen(&#39; + index + &#39;)&#34;&gt;Open in Fullscreen Mode&lt;/button&gt;&amp;nbsp;&lt;strong&gt;Tip:&lt;/strong&gt; Press the &#34;Esc&#34; key to exit full screen.&lt;br&gt;&#39;).insertBefore(this); }); }); function openFullscreen(index) { var elem = document.getElementsByClassName(&#34;fullscreenframe&#34;)[index]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } } </code></pre> </answer> <answer tick="false" vote="0"> <p>为什么不整合 jQuery?</p> <pre><code>const fullScreen = element =&gt; element.requestFullScreen(); // all modern browsers $(function(){ $(&#34;.node--view-mode-full iframe[src*=&#39;.pdf&#39;]&#34;).each(function (index) { $(this).addClass(&#39;fullscreenframe&#39;); $(this).attr(&#39;id&#39;, &#39;fullscreen-&#39;+index); $(&#39;&lt;button class=&#34;fullScreen&#34;&gt;Open in Fullscreen Mode&lt;/button&gt;&amp;nbsp;&lt;strong&gt;Tip:&lt;/strong&gt; Press the &#34;Esc&#34; key to exit full screen.&lt;br&gt;&#39;).insertBefore(this); }); $(&#34;.fullScreen&#34;).on(&#34;click&#34;, function() { const $iFrame = $(this).closest(&#39;p&#39;).find(&#39;iframe.fullscreenframe&#39;); if ($iFrame) fullScreen($iFrame.get(0)); // pass the DOM element }); }); </code></pre> </answer> </body></html>


预提交检查如何在本地失败但在 CI 服务器上通过?

我的开发机器上有一个干净的分支工作树。如果我运行 pre-commit run --all-files 我的格式化程序挂钩会失败,从而重新格式化一些文件。我的 CI 服务器 (Atlassian Bamboo) 也运行预


显示多行文本的正确方法是什么?

我有一个 HTML 文档,其中有一些不同的文本行,是否有一些确定的正确方法来显示它们? 例子: 这里有 一些线路 文本的 我应该为每一行使用 标签,还是...... 我有一个 HTML 文档,其中包含一些不同的文本行,是否有一些确定的正确方法来显示它们? 示例: Here are some lines of text 我应该为每一行使用 <p> 标签,还是有其他/更好的方法来做到这一点? 示例: <p>Here are</p> <p>some lines</p> <p>of text</p> 或 <p> Here are <br> some lines <br> of text <br> </p> 或者完全不同的东西? CSS 和其他东西目前并不真正相关,我只是想知道哪种是“最正确”的使用方式。 如果您想在 div 中显示包含新行的字符串,则可以使用 white-space: pre-wrap css 样式: .multiline { white-space: pre-wrap; } <div class="multiline"> A multiline text for demo purpose </div> 或者你可以尝试this而不用标签换行每行: <div style="white-space:pre"> Here are some lines of text </div> 正确的做事方法是使用为你需要的东西而制作的东西。 如果您想要换行(输入),请使用 <br>; 如果要定义段落,请使用 <p>。 根据this,<br>元素用于插入换行符而不开始新段落。因此,与第一个解决方案相比,您应该更喜欢第二个解决方案。 w3schools 附带了一篇关于风格指南和编码约定的精彩文章。 规范非常清楚地表明,永远不要使用<br>,除非换行符实际上是形成单个文本单元的内容的一部分。 由于这些是不同的文本行,而不是恰好包含换行符的单个单元,因此需要将它们拆分为单独的 <p> 元素。 不存在最正确的方式,至少根据您当前的需求规范。是的,您可以使用 <p></p> 标签将它们全部放在单独的段落中,或者您可以通过每行的 <br> 标签将它们分开。您还可以将 span 与空白 CSS 属性结合使用,这样您就有很多选择。要选择最适合您的选项,您需要尝试一下,看看什么最适合您的要求。 如果您想创建一个多行段落来保持代码中的行分隔,而不到处乱扔。只需使用 html 标签即可。 使用 <pre> 标签就是您想要的: <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre> “pre”代表“预格式化文本” https://www.w3schools.com/tags/tag_pre.asp


为什么 Odoo 17 没有在 <notebook> 中为我的字段渲染标签?

我正在运行有关 Odoo 17 开发的教程,并为第 7 章中的练习创建了以下代码: 我正在运行有关 Odoo 17 开发的教程,并且我为第 7 章中的练习创建了此代码: <record id="estate_view_form" model="ir.ui.view"> <field name="name">estate.property.form</field> <field name="model">estate.property</field> <field name="arch" type="xml"> <form string="Estate Property" create="True"> <sheet> <group string="Info"> <field name="name" /> <field name="description" /> </group> <group string="Location"> <field name="postcode" /> </group> <notebook> <page string="Specs"> <field name="facades" /> <field name="garage" /> </page> </notebook> </sheet> </form> </field> </record> 它可以工作,但 <notebook> 中字段的标签未呈现。我尝试添加 string 属性,但这不起作用。 <notebook> 上的 文档没有提及任何有关此行为的信息。 IIRC 自从我使用的每个版本(6.1+)以来,你必须在 group 周围有一个 field 才能自动获取标签。


如何取消点击Primevue的单选按钮?

我正在使用 vue3 和 Primevue 来开发我的应用程序。我想在单击时取消选择 Primevue 的单选按钮。有办法做到吗?这是我的单选按钮代码。 我使用 vue3 和 Primevue 来开发我的应用程序。我想在单击时取消选择 Primevue 的单选按钮。有办法做到吗?这是我的单选按钮代码。 <div class="field col-12 md:col-12 lg:col-12"> <template v-for="currency in currencies" :key="currency.id"> <div v-if="v$.currency.$model !== currency.code" class="flex align-items-center mb-2"> <RadioButton v-model="paidInType" :inputId="currency.code" name="payIn" :value="currency.code" /> <label :for="currency.code" class="ml-2">Pay in {{ currency.symbol }}</label> </div> </template> </div> 单选按钮并不意味着不可选择。 请针对您的用例使用复选框或切换组件,并根据您的需要重新设计它们。 但是如果您确实需要覆盖默认的单选按钮操作,则添加 @click 方法来删除所选值(如果其等于单击的单选按钮值)。 从 UI/UX 角度来看,您不应该将单选按钮留空。这就是为什么 PrimeVue 无线电组件没有 required 属性(只是假设需要)。这种行为已经成为几十年来的标准,即必须选择一个单选选项,即使该选项是“不适用”或“不想说”等。如果您确实需要取消选择,请首先考虑使用不同的组件。 如果您确实想取消选择单选按钮,您需要做的就是在选择事件时将 v-model 设置回默认的未选择值状态。由于您需要首先确认新选择的值与之前的值相同,因此您需要始终跟踪之前的值。 const paidInType = ref(''); const prevValue = ref(''); function selectRadio(value) { if (prevValue.value === paidInType.value) { paidInType.value = ''; } } <RadioButton v-model="paidInType" @click="prevValue = paidInType" @update:modelValue="selectRadio(currency.code)" :inputId="currency.code" name="payIn" :value="currency.code" /> stackblitz 演示


如何修复移动设备上 html 中不正确的 <pre> 格式?

我在 html 文件中有一些 ASCII 艺术,位于 标签内。 文本在桌面上以适当的间距正确显示,但在移动设备上查看时格式会变得混乱。 我正在使用 我在 html 文件中有一些 ASCII 艺术,位于 <pre> 标签内。 文本在桌面上以适当的间距正确显示,但在移动设备上查看时格式会变得混乱。 我正在使用等宽字体系列,尝试更改为其他字体,但结果相同。 截图 桌面: 手机: 我已经检查过 Google chrome 和 Brave 浏览器,两者显示的结果相同。 如果有人想自己查看,该页面托管在 ankushKun.github.io 上。 HTML:https://pastebin.com/E89hmN3i CSS:https://pastebin.com/pkuURxsQ html 页面使用 javascript 从 .txt 文件加载附加 html,该文本文件包含 ascii art。任何具有 include-html="file-path" 的 html 标签都将替换为该文件的内容。 TXT:https://pastebin.com/WkDTMNwJ 我尝试过将ascii直接放入.html页面中,但它具有相同的结果,因此这不是将txt文件加载到html中的问题,而是我认为文本在移动设备上的格式化方式有问题。 例如 ██████ ██ ████████ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ███████ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██████ ██████ 谢谢你。 一种方法可以是测量您的pre,如果它更宽,则屏幕宽度使用css变换缩放它。 let art = document.querySelectorAll('pre')[0]; let artWidth = window.getComputedStyle(art).getPropertyValue('width'); if (window.screen.width < parseFloat(artWidth)) { art.setAttribute('style', 'transform: scale(0.5)'); } <pre> ██████ ██ ████████ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ███████ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██████ ██████ </pre> 对于未来的读者,问题出在我使用的 ASCII ART 上,它在 Android 上渲染不正确,只需将 ASCII 更改为其他内容并检查它是否正确渲染 很抱歉在这里滥用了SO功能,但我还没有足够的声誉来发表评论,所以我必须将其发布为“答案”。 我不明白公认的答案:“问题在于我使用的 ASCII ART,它在 Android 上渲染不正确,只需将 ASCII 更改为其他内容......” 这是否意味着只需使用图像即可? 毕竟,unicode 块字符并不是真正的 ASCII... 我在这里面临同样的问题...unicode 块和框字符的宽度都相同(很好),但没有一个 unicode 空白似乎具有完全相同的宽度。 (我尝试以这种方式显示二维码,因此空白确实需要完全空白,并且它们需要与块和框字符一致。


链接到管理模板中的不同管理对象

我不想让js弄脏我的手。我有两个模型,汽车和模型。 如何在自定义管理模板中手动添加从汽车到其模型的链接? 我可以: 我不想让 js 弄脏我的手。我有两个型号,car和model。 如何在自定义管理模板中手动添加从汽车到其模型的链接? 我能做到: <a href="{% url 'admin:appname_carmodels_changelist' %}">access changelist</a> 但是我如何访问 pk=42 的模型呢?我试过: <a href="{% url 'admin:appname_carmodels_change' 42 %}">access changeform</a> 但我最终得到了NoReverseMatch at /admin/appname/carmodel/.../change/。这可能吗?还是我必须使用一些可以携带反向功能的extra_context? from django.urls import reverse from django.utils.html import format_html @admin.register(YourAPP) class AdminCustome(admin.ModelAdmin): list_display = ('id', 'link_to_other_obj',) def link_to_other_obj(self, obj): # foreign key is your other object(for example carmodel) related_obj = obj.foreign_key url = reverse('admin:appname_carmodels_change', args=[related_obj.id]) return format_html('<a href="{}">{}</a>', url, related_obj) link_to_other_obj.short_description = 'go_to_car_model_page'


Laravel POST 方法返回状态:405 不允许在 POST 方法上使用方法

请查找以下信息: NoteController.php 请查找以下信息: NoteController.php <?php namespace App\Http\Controllers; use App\Http\Requests\NoteRequest; use App\Models\Note; use Illuminate\Http\JsonResponse; class NoteController extends Controller { public function index():JsonResponse { $notes = Note::all(); return response()->json($notes, 200); } public function store(NoteRequest $request):JsonResponse { $note = Note::create( $request->all() ); return response()->json([ 'success' => true, 'data' => $note ], 201); } public function show($id):JsonResponse { $note = Note::find($id); return response()->json($note, 200); } public function update(NoteRequest $request, $id):JsonResponse { $note = Note::find($id); $note->update($request->all()); return response()->json([ 'success' => true, 'data' => $note, ], 200); } public function destroy($id):JsonResponse { Note::find($id)->delete(); return response()->json([ 'success' => true ], 200); } } NoteRequest.php <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class NoteRequest extends FormRequest { public function authorize() { return true; } public function rules() { return [ 'title', 'required|max:255|min:3', 'content', 'nullable|max:255|min:10', ]; } } Note.php(模型) <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Note extends Model { use HasFactory; protected $guarded = []; } api.php <?php use App\Http\Controllers\NoteController; use Illuminate\Support\Facades\Route; Route::prefix('v1')->group(function () { Route::resource('/note', NoteController::class); }); php artisan 路线:列表 GET|HEAD / ...................................................................................................................... POST _ignition/execute-solution ............... ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionController GET|HEAD _ignition/health-check ........................... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController POST _ignition/update-config ........................ ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController GET|HEAD api/v1/note .......................................................................... note.index › NoteController@index POST api/v1/note .......................................................................... note.store › NoteController@store GET|HEAD api/v1/note/create ................................................................. note.create › NoteController@create GET|HEAD api/v1/note/{note} ..................................................................... note.show › NoteController@show PUT|PATCH api/v1/note/{note} ................................................................. note.update › NoteController@update DELETE api/v1/note/{note} ............................................................... note.destroy › NoteController@destroy GET|HEAD api/v1/note/{note}/edit ................................................................ note.edit › NoteController@edit GET|HEAD sanctum/csrf-cookie .................................. sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show 迅雷请求(同邮递员) JSON 请求 { "title": "Hello World", "content": "Lorem ipsum." } 尝试发出 JSON POST 请求并获取状态:405 方法不允许并且我正在使用 php artisan 服务,如果需要,我可以提供 GIT 项目。请告诉我。 您的验证规则看起来不正确。在您的 NoteRequest 类中,规则应该是一个关联数组,其中键是字段名称,值是验证规则。但是,在您的代码中,规则被定义为以逗号分隔的字符串列表。这可能会导致验证失败并返回 405 Method Not allowed 错误。 public function rules() { return [ 'title' => 'required|max:255|min:3', 'content' => 'nullable|max:255|min:10', ]; }


Pinia 对象在 Vue 中的 foreach 后失去反应性

我有这个嵌套的foreach BalanceItemList.vue ... 我有这个嵌套的 foreach BalanceItemList.vue <template> <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5"> <div class="border-black border-b bg-gray-200"> <span class="font-bold w-full">{{ category.name }}</span> </div> <div v-for="balanceItem in category.balance_items" :key="balanceItem.id"> {{ balanceItem.total = 500 }} <balance-item :balance-item="balanceItem" @update-balance-item="update"/> </div> <div> <balance-item-create :category="category.id" @create-balance-item="update"/> </div> <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2"> <div :class="category.is_positive ? '': 'text-red-600' " class="col-start-4 border-t-2 border-black font-bold"> &euro;{{ categoryItemsStore.totals[category.id].total }} </div> </div> </div> </template> 我像这样检查了“balanceItem”的反应性 {{ balanceItem.total = 500 }} 它在商店中更新,但随后我有了我的平衡项目组件: BalanceItem.vue <script setup> import {reactive} from "vue"; import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = reactive(props.balanceItem); const form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { props.balanceItem.total = 500 categoryItemStore.updateBalanceItemsTotals(form) emit('update-balance-item') } }) } </script> <template> <form @submit.prevent="submit"> <div class="grid grid-cols-4-b"> <span>{{ item.name }}</span> <NumberInput v-model="form.count" autofocus class=" mr-4 mt-1 block" type="number" @update:model-value="submit" /> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1">&euro;</div> <NumberInput v-model="form.amount" :class="form.errors.amount ? 'border-red-600' : ''" autofocus class="mt-1 mr-4 w-5/6" type="text" @update:model-value="submit" /> </div> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1 w-5/6">&euro;</div> <NumberInput v-model="form.total" autofocus class="mt-1 block" disabled style="max-width: 95%" type="text" /> </div> </div> </form> </template> 这是我测试反应性的商店。如果我增加输入的数字,则项目的计数保持不变 UseCategoryItemsStore.js import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } function updateBalanceItemsTotals(selectedItem) { balanceCategories.value.forEach((category) => { category.balance_items.forEach((item) => { if (item.id === selectedItem.id) { // item.total = item.count * item.amount console.log(item) } }) }) } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals} }) 在此测试中,我执行“props.balanceItem.total = 500”。但如果我检查商店,它不会更新。看来将“balanceItem”分配给一个道具会失去与我的 Pinia 商店的反应性。我可以使用“form.total = form.count * form.amount”手动更新我的表单,但这对我来说似乎很老套,我想使用 Pinia 商店的反应性。我考虑过根据“BalanceItem”获取 Pina 项目,但这似乎也很棘手。谁知道为什么失去反应性? 我有laravel 10.39、vue3.2.41和pinia 2.1.17惯性0.6.11。到目前为止我知道的所有最新版本。 我像这样更新我的表格和商店: <script setup> import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = categoryItemStore.getItemById(props.balanceItem); let form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { item = categoryItemStore.updateItem(form) form = useForm(item) emit('update-balance-item') } }) } </script> 我将此功能添加到我的商店: import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getItemById(item) { let category = balanceCategories.value.find((category) => { return category.id === item.item_category_id }) return category.balance_items.find((item_from_store) => { return item_from_store.id === item.id }) } function updateItem(form) { const item = getItemById(form) item.count = form.count item.amount = form.amount item.total = item.count * item.amount return item } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, getItemById, updateItem} }) 假设如果帖子获得 200,我的表单值可用于更新商店和更新表单。这是我能想到的最好的


MazPhoneNumberInput Vue.js 上的自动对焦

我在表单中使用 MazPhoneNumberInput 组件(https://maz-ui.com/components/maz-phone-number-input): 我正在以这种方式使用 MazPhoneNumberInput 组件(https://maz-ui.com/components/maz-phone-number-input): <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" show-code-on-list :preferred-countries="['DE', 'US', 'GB']" noFlags /> 并且想在手机输入上设置自动对焦。 MazPhoneNumberInput 组件本身没有 autofocus 属性,但它基于具有 autofocus 属性的 MazInput 组件(https://maz-ui.com/components/maz-input): 我尝试通过 javascript 使用 onMounted 方法设置焦点: import AppLayout from "@/Layouts/Auth/AppLayout.vue"; import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput' import {ref, onMounted} from 'vue' const phoneNumber = ref() const countryCode = ref('DE') const focusInput = () => { phoneNumber.value.focus(); }; onMounted(focusInput); 但是没有成功。 如何在手机输入上设置自动对焦? 这可以使用 template ref 来完成,它可以访问组件的 DOM 元素。由于根元素只是多个其他元素的包装,因此需要额外的查询来获取实际的电话输入,然后您可以将其聚焦: onMounted(async () => { const phoneEl = phone.value.$el // MazPhoneNumberInput root DOM element const phoneInput = phoneEl.querySelector('input[type=tel]') // inner input DOM element await nextTick() // can focus after next DOM update phoneInput.focus() })


如何使用 blazor <InputDate /> 标签使用当地文化来格式化日期

我正在我的 Blazor 应用程序中使用该标签。但是我如何使用我自己的文化来格式化日期? 我正在我的 Blazor 应用程序中使用该标签。但是我如何使用我自己的文化来格式化日期? <InputDate class="form-control" @bind-Value="@ValidDate" @bind-Value:culture="nl-BE" @bind-Value:format="dd/MM/yyyy" /> 问候 迪特尔 答案是@bind-Value:format,就像这样 @page "/" <EditForm Model="@CurrentPerson"> <InputDate @bind-Value="@CurrentPerson.DateOfBirth" @bind-Value:format="dd/MM/yyyy"/> </EditForm> @code { Person CurrentPerson = new Person(); public class Person { public DateTime DateOfBirth { get; set; } = DateTime.Now; } } 还可以选择使用bind-Value:culture。 无法设置InputDate或<input type="date">的格式。这取决于浏览器设置。用户可以更改浏览器的语言。但您无法从 HTML 更改它。如果您确实需要自定义格式,则必须使用InputText或<input type="text">。我建议使用一些 javascript 库,例如 jQuery UI datepicker。 该解决方案对我不起作用。我是这样工作的: @代码{ 仅私人日期? _geboortedatum; private string GeboortedatumFormatted { get => _geboortedatum?.ToString("dd-MM-yyyy") ?? ""; set { if (DateOnly.TryParse(value, out var newDate)) { _geboortedatum = newDate; } } } } 地质学 _geboortedatum" class="text-danger" />


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>&copy; @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"));


从 html 中提取 <h2> 标题文本,其中标题文本可能包含 <code> 和 </code> 标签

我有一个 html 文件,其中包含一些 标签,例如 一个<- ' 我有一个 html 文件,其中包含一些 <h2> 标签,例如 a <- '<section id="sec-standard-stoet-geary" class="level2" data-number="9.4"> <h2 data-number="9.4" class="anchored" data-anchor-id="sec-standard-stoet-geary"> <span class="header-section-number">9.4</span> Standardising PISA results</h2>' b <- '</span> <span class="fu">read_parquet</span>(<span class="st">"&lt;folder&gt;PISA_2015_student_subset.parquet"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre> </div> </div> </section><section id="sec-leftjoin" class="level2" data-number="9.3"><h2 data-number="9.3" class="anchored" data-anchor-id="sec-leftjoin"> <span class="header-section-number">9.3</span> Linking data using <code>left_join</code> </h2> <p>' 我可以使用以下方法提取a的标题: str_extract_all(a, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > [1] "Standardising PISA results" 但是在 b 上尝试这个不会返回任何结果: str_extract_all(b, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > character(0) 编辑:从评论来看,这似乎是正则表达式无法解析换行符。 我尝试在正则表达式(?s)中启用单行模式进行解析,但它仍然不起作用 我会在这里使用 html 解析器而不是正则表达式: library(rvest) read_html(a) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.4 Standardising PISA results" read_html(b) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.3 Linking data using left_join"


如何在 Vuetify.js 中单击附加图标时调用函数?

我需要append-icon="close"来调用@click="clearSearch()" 现在我正在使用一个专用按钮来实现它: 我需要 append-icon="close" 打电话给 @click="clearSearch()" 现在我正在使用专用按钮来实现它: <v-text-field v-model="search" class="search" label="search" prepend-icon="search" append-icon="close"> </v-text-field> <v-btn @click="clearSearch()"></v-btn> 我尝试添加append-icon-cb="clearSearch()"但它不起作用,我不知道为什么 我也尝试过简单地使用clearable,它会清除输入,但所有元素都保持“过滤”状态。我不知道 clearable 是如何工作的,但我的 clearSearch() 方法只是这样做: clearSearch() {this.search = ""} 并且它有效,这就是为什么我使用自定义 clear input 方法 使用 @click:append="clearSearch",:append-icon-cb 已弃用。 (来源) 解决了,解决方法如下: 为了避免这个问题,您应该使用 : 符号绑定属性: :append-icon-cb="clearSearch" 并且不要放(),否则它将无法工作(正如@Traxo提到的) 我认为如果你删除 () 应该可以工作,因为包含 () 后,你立即只需调用一次函数即可。 编辑:不要忘记冒号: 所以: :append-icon-cb="clearSearch" 但这发生了变化: 对于附加图标,例如 append-icon="mdi-magnify-plus-outline", 你就这样做 @click:append="zoomIn"。 但是对于附加外部图标,例如 append-outer-icon="mdi-plus-circle-outline",` 您必须添加单词“append”,即 @click:append-outer="addMore" 因此,这将适用于 Vue2 <v-text-field solo append-outer-icon="mdi-plus-circle-outline" @click:append-outer="addMore" > </v-text-field> 只需将 :append-icon-cb="() => (e1 = !e1)" 更改为 @click:append="() => (e1 = !e1)" 即可完美运行并删除警告...


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