javascript 相关问题

如何在react-native中传递state.params

我对反应原生有点陌生，我正在尝试使用反应原生地图做一些基本的应用程序。 我有一个登录屏幕，登录屏幕后我有一个用于不同条目的不同抽屉。在...

Javascript .eval() 返回未定义

这是我的代码： <% @unit.attempts.order("created_at DESC").each do |attempt| %> &... 这是我的代码： <div class="row"> <div class="col-md-4 black"> <% @unit.attempts.order("created_at DESC").each do |attempt| %> <p><%= attempt.body %></p> <% end %> </div> <div class="col-md-4 run"> <div class="view-lines"> <h2>app.js</h2> <%= form_for [@unit, @attempt] do |f| %> <%= f.text_area :body,class: "editor"%> <%= f.submit "Run"%> <% end %> <script> $(document).ready(function(){ var code = $(".editor")[0]; var editor = CodeMirror.fromTextArea(code,{ lineNumbers: true, styleActiveLine: true, mode: "javascript", matchBrackets: true }) $('.view-lines').each(function(index,item) { var v= $(item).find('.editor').val(); alert(eval(v)); }); }) </script> 例如，如果我想在文本区域内添加 var favoriteFood = 'pizza'; console.log(favoriteFood); 我在警报中得到的结果 var favoriteFood = 'pizza'; console.log(favoriteFood); 我想在警报中运行我的示例中的 javascript 代码，它应该是披萨 我不确定您要在这里完成什么，但为了解决您的问题，您可以首先评估这些命令，假设它们填充给定的变量名称，然后使用该变量名称而不是eval的结果。 所以在你的情况下，这样的事情可能会起作用： eval("var favoriteFood='pizza';"); alert(favoriteFood); // will alert with the message "pizza" 如果您期望用户在每一行上放置一个单独的命令，您可以循环遍历这些行并单独评估它们，如下所示： eval("var favoriteFood='pizza';"); eval("favoriteFood += ' slices';"); alert(favoriteFood); // will alert with the message "pizza slices" 总的来说，你不应该像这样盲目地执行用户输入的数据，从安全角度来看这是一个大问题。 但我希望这对你今天做的菜有帮助。 编辑：（回答评论问题） 在你的情况下，而不是这个： alert(eval(v)); 你可以这样做： eval(v); alert(favoriteFood); 再次假设您在文本区域中设置了一个名为 favoriteFood 的变量。 如果您想删除该资格，我认为您没有办法使用 eval 来做到这一点。 你不明白 eval() 的作用。 eval 将表达式作为输入并返回最后一个表达式的值： console.log(eval("2+2")) // -> 4 console.log(eval("Math.pow(2, 10)")) // -> 1024 console.log(eval("let x = 100; x - 1")) // -> 99 console.log() 在 eval() 内部没有改变。它的作用与正常代码相同。 好的，但是如果我想要console.log()怎么办？ 您可以重新定义console和console.log()： function executeCode(code) { let logs = []; // Logs array // Redefine console let console = { log(...args) { // We can pass as many args as we want logs.push(args); } } // Eval the code eval(code); // Return the logs return logs; } // Demos console.log(executeCode('console.log("Hello, world!")')) console.log(executeCode('let x = 5; console.log("X is", x)')) 注意什么eval是邪恶的 let password = "1234"; // An important variable let login = "vasya" // Another one // Execute code function executeCode(code) { let logs = []; // Logs array // Redefine console let console = { log(...args) { // We can pass as many args as we want logs.push(args); } } // Eval the code eval(code); // Return the logs return logs; } // Code may be not yours, as example shared to you console.log(executeCode('console.log("Got your password: ", password)')) // Code can access to almost anything console.log(executeCode('login = "abcdef"')) // And can modify everything console.log("INFO: Login is", login) // Or it can redirect you // console.log(executeCode('window.location.href = "example.com"')) 当然有一些方法可以确保这一点，如果你愿意的话 - 我可以添加它们

我想用js选择选项？

我想用js选择get选项，但我的代码返回“未定义”。 错误在哪里？ const aaa = document.querySelector("#test") const rng = aaa.addEventListener("更改",(e)=>...

如何将 React 应用程序部署到我的 WordPress 网站？

我是 React 新手，正在尝试将我的 React 站点添加到服务器，以便我可以测试 php 表单处理脚本。我已运行 npm run build 命令并将生成的“dist”文件夹上传到

Laggy/Glitchy CSS 动画仅适用于带有 Intersection Observer 的 Firefox

我正在利用 Intersection Observer API 在网站标题徽标未位于（或接近位于）背景图像上方时隐藏网站标题徽标。 在 Google Chrome、其他 chromium 浏览器和 Safa 上运行良好...

我正在为网站制作语言切换器，如何禁用它或更改其在移动设备上的位置？

我正在制作一个语言切换器，但我需要根据屏幕尺寸更改其位置，因为在移动设备上它会超出屏幕。我怎样才能做到这一点？ <p>我正在制作一个语言切换器，但我需要根据屏幕尺寸更改其位置，因为在移动设备上它会超出屏幕。我怎样才能做到这一点？</p> <pre><code>&lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = &#39;en&#39;; var lang = location.pathname.split(&#34;/&#34;)[1]; var defaultClass = &#39;lang-&#39;+defaultLanguage+&#39;&#39;; var itemParent = &#34;nav [class*=&#39;collection&#39;],nav [class*=&#39;folder&#39;],nav [class*=&#39;index&#39;],nav [class*=&#39;group&#39;]&#34;; if (lang == &#34;&#34; || lang.length &gt; 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $(&#39;a[href=&#34;/&#34;]&#39;).addClass(&#39;lang-&#39;+defaultLanguage+&#39;&#39;).parents(itemParent).addClass(&#39;lang-&#39;+defaultLanguage+&#39;&#39;); $(&#39;nav a:link:not([href^=&#34;http://&#34;]):not([href^=&#34;https://&#34;])&#39;).each(function () { var langType = $(this).attr(&#39;href&#39;).split(&#34;/&#34;)[1]; var multiLanguageClass = &#39;multilanguage lang-&#39; + langType + &#39;&#39;; if (undefined !== langType &amp;&amp; langType.length &lt;= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $(&#39;nav button&#39;).each(function () { var langTypeFolder = $(this).attr(&#39;data-controller-folder-toggle&#39;).split(&#34;/&#34;)[0]; var multiLanguageClass = &#39;multilanguage lang-&#39; + langTypeFolder + &#39;&#39;; if (undefined !== langTypeFolder &amp;&amp; langTypeFolder.length &lt;= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == &#34;pt&#34;) { $(&#39;a[href=&#34;/&#34;]&#39;).attr(&#34;href&#34;, &#34;/pt/inicio/&#34;); } /* ADD EXCLUSION NAV ITEMS */ $(&#39;.exclude-me,.exclude-me a&#39;).addClass(&#39;exclude&#39;); $(&#39;.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control&#39;).addClass(&#39;exclude&#39;); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $(&#39;.multilanguage:not(&#34;.lang-&#39;+lang+&#39;,.exclude&#34;)&#39;).remove(); }); &lt;/script&gt; &lt;script&gt; /*setup language switcher*/ $(&#39;body&#39;).prepend(&#39;&lt;div class=&#34;language&#34;&gt;&lt;a href=&#34;/en/home&#34; class=&#34;lang-en&#34;&gt;English&lt;/a&gt; | &lt;a href=&#34;/pt/inicio/&#34; class=&#34;lang-pt&#34;&gt;Português&lt;/a&gt;&lt;/div&gt;&#39;); &lt;/script&gt; </code></pre> <p>我是制作网站的新手，我不知道如何更改手机上语言切换器的位置，因为它超出了屏幕哦，如果有帮助的话，我正在使用 squarespace 来制作网站和所有内容代码被注入到页脚中。我已经尝试过这个解决方案，将所有代码放入 div 元素中。</p> <p>也许我的要求太多了，但任何人都可以帮我制作它，使其适应屏幕的尺寸吗？因为当屏幕较小时，它会凌驾于其他事物之上。</p> <pre><code>&lt;style&gt; /* Hide content on mobile */ @media only screen and (max-width: 768px) { .desktop-only { display: none; } } &lt;/style&gt; </code></pre> </question> <answer tick="false" vote="-1"> <p>由于您正在使用语言类，因此请在此应用 css。 如果您想仅使用 .desktop，请在 .language 类之后将其添加到您的 html 中。</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>$(&#39;body&#39;).prepend(&#39;&lt;div class=&#34;language desktop-only&#34;&gt;&lt;a href=&#34;/en/home&#34; class=&#34;lang-en&#34;&gt;English&lt;/a&gt; | &lt;a href=&#34;/pt/inicio/&#34; class=&#34;lang-pt&#34;&gt;Português&lt;/a&gt;&lt;/div&gt;&#39;);</code></pre> <pre><code>.language { display: block; } /* Hide language switcher on small screens (mobile or tablets) */ @media (max-width: 768px) { .language { display: none; } }</code></pre> <pre><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js&#34;&gt;&lt;/script&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

我总是在Javascript中看到这段奇怪的代码

我不是Javascript专家，但我所知道的旧Javascript只是一堆简单的函数和变量，如下所示： 函数 doSomething(){ var data =“测试”； 返回数据； } 但是

为什么`+！ {} [true]` 计算结果为 1？

在 JavaScript 中，以下代码行给出的答案为 1 + ! {} [真的] 我不明白怎么办？ 任何大师的解释都值得赞赏。

某个值在对象数组中重复多少次

嗨，我有这个对象数组： 常量员工 = [ {年龄：35，姓名：“David”职位：“前端”}， {年龄：24，姓名：“Patrick”职位：“后端”...

为什么在条件执行块内声明的函数在进入该块之前似乎已经存在？

我花了三天时间试图缩小一个问题，现在我发现它我无法理解。 我想检查一个函数是否存在，如果不存在则创建它。然而 JS 总是说函数 e...

为什么命名函数表达式不能使该名称在作用域内可访问，但仍然可以删除？

如果我将命名函数分配给变量，为什么我无法访问命名函数： var a = 函数 b() { console.log("你好世界"); } a() // 你好世界; b() // b 未定义 b // b 我...

如何在react js中通过props传递内联样式？

我想通过这样的道具传递内联样式： {价格} 从“反应”导入反应； 函数 P(props) { 返回 我想用这样的道具传递内联样式： <P style={{marginTop : '20px'}}>{price}</P> import React from 'react'; function P(props) { return <p style={{ width: '100%', textAlign: 'right', fontSize: '1.3em' ,{props.style} }}>{props.children}</p>; } export default P; 但是它在终端中抛出一个错误： Unexpected token, expected , (4:74) 2 | 3 | function P(props) { > 4 | return <p style={{ width: '100%', textAlign: 'right', fontSize: '1.3em' {props.style} }}>{props.children}</p>; | ^ 5 | } 6 | 7 | export default P; 如何将带有 props 的内联样式传递给 React js 中的另一个组件？ 你应该做的是，发送 margin-top 的确切值，而不是 css 代码，就像这样 <P marginT='20px'>{price}</P> 并像这样使用它： <p style={{ marginTop: this.props.marginT }}>{props.children}</p>; 你应该像这样传递样式道具： function P(props) { return <p style={{ width: '100%', textAlign: 'right', fontSize:'1.3em',...props.style }}> {props.children}</p>; } 你可以做这样的事情 <P style='{ "width": "100%", "textAlign": "right", "fontSize": "1.3em"}' price="10"></P> 并在函数中使用它，如下所示 function P(props: {style: any; price: string}) { return <p style={{...JSON.parse(props.style)}}>{Number(props.price)}</p>; } 注意style props 中的属性应该有“”，否则 JSON.parse() 函数将无法工作。

在uib-tab中添加带有active和ng-repeat的选项卡

所以我已经尝试解决这个问题有一段时间了，我看到了一篇与此类似的帖子，但没有得到答复，所以我会尝试发布此帖子，但用 plunkr 来作为示例。 所以问题是在加载时，我

axios.get 中请求失败，状态代码为 403（禁止）

我正在使用react.js 和musixmatch api 构建一个简单的歌词查找应用程序。当我请求 api 时，我在 consoleError 中收到此错误：在 createError 处请求失败，状态代码为 403（创建...

Odoo 16 门户小部件不适用于公共用户

在Odoo v16模板表单中，我有一个选择字段“活动类型”，其中包含来自后端的记录（类似于Many2many标签小部件，但现在在门户中），将由用户选择，并且用户可以...

react-native-config 库无法在 iOS 设备上运行

我在React Native项目中遇到了react-native-config库的问题，它在Android上按预期工作，但在iOS上无法工作。 环境： React Native 版本：0.6...

触发 UpdatePanel 后 JavaScript 停止工作

我的 UpdatePanel 和 JavaScript 遇到问题。 JavaScript 代码一开始工作得很好，但在触发 UpdatePanel 后就停止工作了。 这是代码： ...</desc> <question vote="0"> <p>我的 UpdatePanel 和 JavaScript 遇到问题。 JavaScript 代码一开始工作得很好，但在触发 UpdatePanel 后就停止工作了。 这是代码：</p> <pre><code>&lt;script&gt; $(document).ready(function () { $(&#39;#&lt;%=txtNum.ClientId%&gt;&#39;).on(&#39;input&#39;, function () { __doPostBack(&#39;clean&#39;, &#39;&lt;%= updGen.UniqueID %&gt;&#39;); }); }); &lt;/script&gt; &lt;asp:UpdatePanel runat=&#34;server&#34; ID=&#34;updGen&#34;&gt; &lt;ContentTemplate&gt; &lt;div class=&#34;col-md-3&#34;&gt; &lt;label runat=&#34;server&#34; id=&#34;lblInserimento&#34; class=&#34;control-label&#34;&gt;Number&lt;/label&gt; &lt;asp:Panel runat=&#34;server&#34; ID=&#34;pnlNum&#34; DefaultButton=&#34;lnkSearch&#34; CssClass=&#34;input-group&#34;&gt; &lt;asp:LinkButton title=&#34;Search&#34; ID=&#34;lnkSearch&#34; OnClick=&#34;lnkSearch_Click&#34; CssClass=&#34;btn btn-default btn-sm input-group-addon&#34; runat=&#34;server&#34;&gt;&lt;i class=&#34;fa fa-search&#34;&gt;&lt;/i&gt;&lt;/asp:LinkButton&gt; &lt;asp:TextBox Enabled=&#34;false&#34; runat=&#34;server&#34; ID=&#34;txtNum&#34; CssClass=&#34;form-control&#34; oninput=&#34;this.value = this.value.replace(/[^0-9]/g, &#39;&#39;);&#34;&gt;&lt;/asp:TextBox&gt; &lt;span runat=&#34;server&#34; id=&#34;spnCodice&#34; class=&#34;input-group-btn&#34;&gt; &lt;asp:LinkButton ID=&#34;btnNumBefor&#34; CssClass=&#34;btn btn-flat btn-sm&#34; runat=&#34;server&#34; OnClick=&#34;btnNumBefor_Click&#34;&gt;&lt;i class=&#34;fa fa-angle-left&#34;&gt;&lt;/i&gt;&lt;/asp:LinkButton&gt; &lt;asp:LinkButton ID=&#34;btnbtnNumAfter&#34; CssClass=&#34;btn btn-flat btn-sm&#34; runat=&#34;server&#34; OnClick=&#34;btnbtnNumAfter_Click&#34;&gt;&lt;i class=&#34;fa fa-angle-right&#34;&gt;&lt;/i&gt;&lt;/asp:LinkButton&gt; &lt;/span&gt; &lt;/asp:Panel&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>问题是当您使用更新面板时，加载代码不会触发。</p> <p>但是，有一种方法可以创建在更新面板（部分页面周期）之后运行的代码存根。因此，应该重新附加此代码并为您重新运行 jQuery 代码：</p> <pre><code> &lt;script&gt; $(document).ready(function () { mywhatever(); }); function mywhatever() { $(&#39;#&lt;%=txtNum.ClientId%&gt;&#39;).on(&#39;input&#39;, function () { __doPostBack(&#39;clean&#39;, &#39;&lt;%= updGen.UniqueID %&gt;&#39;); }); } var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(mywhatever); </code></pre> <p>所以，现在两个页面都“准备就绪”，然后在更新面板之后，两个页面都将运行相同的代码。</p> </answer> </body></html>

将 InputAdornment 应用于 MUI AutoComplete 会删除选项列表

我构建了一个自动完成组件，如下所示： 我构建了一个自动完成组件，如下所示： <Autocomplete freeSolo size="small" id="filter-locks-autocomplete" options={json_list ? json_list : []} groupBy={(option) => option.lock.building} getOptionLabel={(option) => (option.name)} inputValue={inputValue} onInputChange={(event, newInputValue) => setInputValue(newInputValue)} renderInput={(params) => ( <TextField {...params} variant="standard" label={'lock'} InputProps={{ startAdornment: ( <InputAdornment position="start"> <Search sx={{ color: "black", fontSize: 20, marginLeft: "2px" }} /> {params.InputProps.startAdornment} </InputAdornment> ), }} /> )} />; 但是，在框内单击时，选项列表不再出现。 如果我像这样从 <TextField /> 中删除 InputProps： <Autocomplete freeSolo size="small" id="filter-locks-autocomplete" options={json_list ? json_list : []} groupBy={(option) => option.lock.building} getOptionLabel={(option) => option.name} inputValue={inputValue} onInputChange={(event, newInputValue) => setInputValue(newInputValue)} ListboxProps={{ sx: { zIndex: 1500 } }} renderInput={(params) => ( <TextField {...params} variant="standard" label={"lock name"} /> )} />; 选项列表按预期显示。 有没有办法可以将 inputAdornment（只是一个搜索图标）添加到 AutoComplete 组件而不删除选项列表？ 我在这里找到了解决方案，你可以尝试以下代码 <Autocomplete id="tags-standard" options={top100Films} getOptionLabel={option => option.title} defaultValue={[top100Films[13]]} renderInput={params => { return ( <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" fullWidth InputProps={{ ...params.InputProps, startAdornment: ( <> <InputAdornment position="start"> <SearchIcon /> </InputAdornment> {params.InputProps.startAdornment} </> ) }} /> ); }} /> 工作正常。您还可以在 CodeSandbox 中查看 有关更多详细信息，请检查此 Github Material-ui Issue 对于使用 MUI v.6 的用户，您需要使用 slotProps 来代替： <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" fullWidth slotProps={{ input: { ...params.InputProps, startAdornment: ( <> <InputAdornment position="start"> <SearchIcon /> </InputAdornment> </> ), }, }} />

分配的innerHTML导致不同的结构

我尝试将Hello分配给innerHTML，但它导致了不同的结构：Hello。这是……

Google 地图 API 警告：SensorNotRequired

在网站 https://gearbottle.com/ 上，我遇到了一个问题，地图将加载我的地理位置（启用地理位置查看），然后加载所有结果（整个世界） - 我需要它留在