javascript 相关问题

无法通过php中的按钮打开模态框

'; 回显“”。 ... <?php $result = mysqli_query($con, $sql); while ($row = mysqli_fetch_array($result)) { echo '<tr><td>'; echo '<h5 style="margin-left:6px; color:black;">' . $row['id'] . '</h5>'; echo '</td><td>'; echo '<img src="'. $row['imagem']. '" alt>'; echo '<a href="#" class="user-link">'. $row['nome'] . '</a>'; echo '</td><td>'; echo '<h5 style="margin-left:-180px; color:black;">'. $row['idaluno'] . '</h5></td>'; echo '<td class="text-center">'; echo '<h5 style="margin-left:6px; color:black; margin-left:-297px;">'. $row['situacao'] .'</h5>'; echo '</td><td>'; echo '<h5 style="margin-left:15px; color:black;">'. $row['faltas'] .'</h5>'; echo '</td><td>'; echo '<a href="editar.php?idaluno='. $row['id'] .'"><i style="margin-left:10px;" class="fa-solid fa-pencil"> </i></a>'; echo ' <button id="myBtn"> <i style="margin-left:10px;" class="fa-solid fa-trash"></i> </button>'; echo ' </td></tr>'; } ?> <button id="myBtn"> <i style="margin-left:10px;" class="fa-solid fa-trash"></i> </button> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div> <script> // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> 我试图建立一个确认模式来尝试删除sql中的一行，我有php循环每行的按钮，但是该按钮在php内部不起作用，我在php循环之外也有该按钮并且它可以工作 我对 php 和 javascript 很陌生，我认为这可以通过 ajax 请求来解决，但我也对此迷失了。请帮忙 问题在于 JavaScript 代码设置为针对单个按钮和单个模式。使用 PHP 在循环中生成多个按钮时，每个按钮都需要有其唯一的标识符来定位和显示模式。通过在 PHP 循环中为每个按钮和模式动态生成唯一 ID。 <?php $result = mysqli_query($con, $sql); while ($row = mysqli_fetch_array($result)) { $id = $row['id']; // Unique identifier for each row/modal echo '<tr><td>'; echo '<h5 style="margin-left:6px; color:black;">' . $row['id'] . '</h5>'; echo '</td><td>'; echo '<img src="'. $row['imagem']. '" alt>'; echo '<a href="#" class="user-link">'. $row['nome'] . '</a>'; echo '</td><td>'; echo '<h5 style="margin-left:-180px; color:black;">'. $row['idaluno'] . '</h5></td>'; echo '<td class="text-center">'; echo '<h5 style="margin-left:6px; color:black; margin-left:-297px;">'. $row['situacao'] .'</h5>'; echo '</td><td>'; echo '<h5 style="margin-left:15px; color:black;">'. $row['faltas'] .'</h5>'; echo '</td><td>'; echo '<a href="editar.php?idaluno='. $row['id'] .'"><i style="margin-left:10px;" class="fa-solid fa-pencil"> </i></a>'; echo '<button id="myBtn'.$id.'" class="deleteBtn" data-id="'.$id.'"> <i style="margin-left:10px;" class="fa-solid fa-trash"></i> </button>'; echo '</td></tr>'; echo '<div id="myModal'.$id.'" class="modal"> <div class="modal-content"> <span class="close" data-id="'.$id.'">&times;</span> <p>Are you sure you want to delete this row?</p> <a href="delete.php?id='.$id.'" class="confirm-delete">Delete</a> </div> </div>'; } ?> <script> // Function to handle showing the modal function showModal(modalId) { var modal = document.getElementById(modalId); modal.style.display = "block"; } // Function to handle closing the modal function closeModal(modalId) { var modal = document.getElementById(modalId); modal.style.display = "none"; } // Event listener for the delete buttons document.querySelectorAll('.deleteBtn').forEach(function(button) { button.onclick = function() { var id = this.getAttribute('data-id'); showModal('myModal' + id); }; }); // Event listener for the close buttons document.querySelectorAll('.modal .close').forEach(function(span) { span.onclick = function() { var id = this.getAttribute('data-id'); closeModal('myModal' + id); }; }); // Event listener to close the modal when clicking outside of it window.onclick = function(event) { if (event.target.classList.contains('modal')) { event.target.style.display = "none"; } } </script>

我有两个在 vue 中绑定到模型（v-model）的选择框，它们都绑定到同一对象的不同属性。一种按预期工作，另一种则不然

这是第一个选择： 这是第一个选择： <select :disabled="disabled" class="form-control" id="users" ref="users" @change="setUser()" v-model="dAppt.User" > <option disabled selected value="{}">Choose an Employee</option> <option v-for="(u,idx) in users" :key="u" :id="idx" :value="u" >{{ u.getFullName() }}</option> </select> 这是第二个： <select :disabled="disabled" class="form-control" id="job" ref="job" v-model="dAppt.job" :change="setDurations"> <option disabled selected value="{}">{{ jobMessage }}</option> <option v-for="(j,idx) in userJobs" :key="j" :id="userJobs[idx][0]" :value="getJobName(userJobs[idx][0])">{{ getJobName(userJobs[idx][0]) }} </option> </select> 为了尝试诊断此问题，我在更新的挂钩中记录了约会 (this.dAppt)。它保持预期值。请注意，作业名称是一个简单的字符串，而用户是约会对象中的另一个对象。 作为解决方法，我尝试了多种方法来设置所选值。这是代码 for(let idx =0;idx < this.users.length;idx++){ if(this.users[idx].id.trim() === this.dAppt.User.id.trim()){ console.log("found one") console.log(this.dAppt.User.getFullName()) if(this.$refs.users !== null) { //this.$refs.users.selectedIndex = idx + 1 //this.$refs.users.options.selectedIndex = idx +1 this.$refs.users.value = this.dAppt.User } break; } } 有效的方法是作业选择（简单字符串），而无效的方法是用户选择（对象）。 有什么想法吗？预先感谢。 我按照建议将值更改为 user.id，然后将 v-model 从约会的用户更改为约会的 user.id。现在一切正常。感谢您的帮助。

如何在Photoshop脚本中根据变量数据动态设置图层名称？

我不擅长编程，但我是一名优秀的图形设计师:)我使用javascript创建了一个工作自动化（我还协助了codelam）。我在实现目标时遇到一个大问题：

如何将图像保存到我的 phpmyadmin 数据库中？ [已关闭]

我正在使用 PHP、CSS 和 JS 构建一个博客。我从 chatGPT 得到了很多帮助，因为我不太擅长。我已经被这个管理页面困住了 4 天，其中

是否可以PUT/PATCH位于vite+react项目的public文件夹中的json文件？

我尝试使用公共文件夹中的 json 文件作为模拟数据库，我可以使用 get 方法获取 json 文件，但无法更新它。这是有效的获取方法： axios.get('./userData.

保证 Firebase 实时数据库中多个路径的更新顺序

我正在努力寻找问题的答案，我正在阅读文档，但找不到与此相关的任何参考资料。 我有一台服务器可以向我的 Firebase 实时数据库发送更新...

使用 Web Crypto API 签署 CloudKit Web 服务请求

我正在尝试使用 Web Crypto API 对 CloudKit Web 服务请求进行身份验证。 我已经使用节点加密 API 进行了身份验证，并已验证其有效： 从“cryp...”导入加密货币

maybeStripe.apply 不是函数

哎呀， Gatsby 中的 Stripe 在页面加载时出现错误 未捕获（承诺中）TypeError：maybeStripe.apply 不是函数 从 'react' 导入 React, { useEffect, useState }; 小鬼...

谷歌地图 PinElement

像许多人一样，我正在尝试迁移到 Google Maps Javascript API 中的 AdvancedMarkerElement。 我已遵循文档，到目前为止： <p>像许多人一样，我正在尝试迁移到 Google Maps Javascript API 中的 AdvancedMarkerElement。 我已遵循文档，到目前为止：</p> <pre><code>&lt;script defer src=&#34;https://maps.googleapis.com/maps/api/js?key={{env(&#34;GOOGLE_JAVASCRIPT_APIKEY&#34;)}}&amp;loading=async&amp;callback=gmapinit&amp;v=weekly&amp;libraries=marker&#34;&gt;&lt;/script&gt; </code></pre> <p>然后进一步进行回调：</p> <pre><code>async function gmapinit() {//used as callback,required by the api when loading it const {AdvancedMarkerElement} = await google.maps.importLibrary(&#34;marker&#34;); const {PinElement} = await google.maps.importLibrary(&#34;marker&#34;); GMap = new G_Map();//own wrapper class } </code></pre> <p>成功工作是地图上的基本 AdvancedMapMarker：</p> <pre><code> let marker = new google.maps.marker.AdvancedMarkerElement({ map: this.map, position: markerposition, title: title, }); let iconImg = document.createElement(&#34;img&#34;); iconImg.src = optargs.icon; marker.content = iconImg; </code></pre> <p>但是这里的图像没有缩放，我想以编程方式进行缩放。 所以尝试将上面的内容更改为</p> <pre><code> let iconImg = document.createElement(&#34;img&#34;); iconImg.src = optargs.icon; let pin = new PinElement({ scale: 1.5, content: iconImg, }); let marker = new google.maps.marker.AdvancedMarkerElement({ map: this.map, position: markerposition, title: title, content: pin.element }); </code></pre> <p>发生错误的地方是：</p> <pre><code>ReferenceError: PinElement is not defined </code></pre> <p>所以我的问题是如何根据示例加载 PinElement 来编码 - 我显然在某处遗漏了一些简单的东西</p> </question> <answer tick="false" vote="0"> <p>所以我通过一个小小的修正实现了这个：</p> <pre><code> let pin = new PinElement({ </code></pre> <p>成为</p> <pre><code> let pin = new google.maps.marker.PinElement({ </code></pre> <p>所以图钉中图像的代码是</p> <pre><code> let iconImg = document.createElement(&#34;img&#34;); iconImg.src = optargs.icon; iconImg.style = &#34;width:2em&#34;; iconImg.onclick = &#34;alert(&#39;hi&#39;)&#34;; let pin = new google.maps.marker.PinElement({ scale: 1.25, background: &#34;#F7D32F&#34;, glyph: iconImg, }); let marker = new google.maps.marker.AdvancedMarkerElement({ map: this.map, position: markerposition, title: title, content: pin.element, gmpClickable: true }); </code></pre> <p>错误明显存在于对 google.maps.marker.PinElement 的类引用和原始问题的一部分中。</p> <p>如果不纠正最初要求的内容和可见的错误，就永远不可能实现最小的工作示例</p> <p><a href="https://i.sstatic.net/7okhvPGe.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvN29raHZQR2UucG5n" alt="enter image description here"/></a></p> </answer> </body></html>

MondoDB/Mongoose查询响应太慢

我是 MongoDB/Mongoose 的新手，并且使用一个非常大的数据库（超过 25000 个文档）。我需要配置不同的查询：按字段、前 10 个文档、按 id。问题出在性能上......

Express.js 中空日期参数返回不正确的 JSON 对象

我目前正在研究 FreeCodeCamp Timestamp Microservice 项目，在实施过程中遇到了问题。虽然大多数要求都成功通过，但我遇到了麻烦......

按钮点击触发时显示输入框值

我在React.js中创建的项目要求我接受用户的输入并将其显示在网页上，我希望我的平衡按钮在单击时显示输入值，但目前当我...

Javascript 突变观察器寻址 <li>

我使用突变观察器来观察元素发生的变化。观察时，我得到以下输出： 我使用突变观察器来观察 <ul> 元素发生的变化。观察时，我得到以下输出： <li class="rt__body-row full flex gc-07 rt__body-row--odd"> <span class="rt__row-left short">48,359.50</span> <span class="rt__row-center">0.063</span> <span class="rt__row-right">01:57:44</span> </li> 现在我想写一个关于第二个跨度文本（0.063）的 if 语句。如何解决 JavaScript 中的第二个跨度？ 我对编程还很陌生，下面是我的代码： function obser1() { const trades = document.querySelector('.scrollbar-dark'); const observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.addedNodes.length) { console.log(mutation.addedNodes[0]); } }) }); console.log("obs1"); observer.observe(trades, { childList: true, subtree: true, attributes: true, characterData: true }) console.log("observed"); } window.setTimeout(obser1, 1700); 下面是我的清单文件： "name": "Bybit orderbook color", "version": "1.1", "manifest_version": 2, "content_scripts": [ { "matches": [ "https://www.bybit.com/trade/usdt/BTCUSDT" ], "css": [ "Style.css" ], "run_at": "document_idle", "js": [ "background.js" ] } ], "permissions": [ "activeTab" ] } 假设mutation.addedNodes[0]是一个html集合，你可以这样做 const vals = [...mutation.addedNodes[0].querySelectorAll("span")].map(span => span.textContent); 如果你可以做字符串 const fragment = document.createElement("div"); fragment.innerHMTL = mutation.addedNodes[0]; const vals = [...fragment.querySelectorAll("span")].map(span => span.textContent);

由于错误，模块无法加载，并且未调用 `AppRegistry.registerComponent`。，js 引擎：hermes

我正在研究react-native cli 项目。在这个项目中，我在启动开发服务器时遇到错误，如下所示： 错误不变违规：“frontendnative”尚未注册...

在实现中将 javascript 函数作为参数传递给 THIS - 绑定和应用不起作用

我正在尝试创建一个允许用户传递自定义函数的库。 此自定义函数必须能够使用父对象的属性，该父对象保存在...

DaisyUI / Next.Js 倒计时不显示 3 位数字

所以我是 Next.js 网站的倒计时，并且正在使用 daisyUI 倒计时组件，但天数高于 99 的任何数字都无法正确呈现，如下所示： 所以最初我有一个...

使用 MutationObserver 监听变化？

我有一个使用 setInterval 来检查某些对象状态的脚本，但它会导致一点滞后，我想知道是否可以使用 MutationObserver？ 我的设置间隔： var checkExist =

使用onclick时什么也没有出现

我正在尝试根据我国现有的药物构建一个简单的 ADD 药物计算器。我还没有写完剧本，因为当我选择“丽塔...

如何在 Vue 3 中观察 div 内的变化

如何观察 Vue 3 中 div 内的任何更改，例如类或文本更改。 从 我的文字 到： 我的 如何观察 Vue 3 中 div 内的任何更改，例如类或文本更改。 来自 <p class="font-bold">My text</p> 至： <p class="font-bold color-red">My updated text.</p> 我尝试过 Vue 3 Watch 方法，但 Watch 方法并不查找 div 内的更改。 watch(myDiv, (newValue, oldValue) => { // not working for changes inside a myDiv. }) 您可以使用您的段落创建一个 SFC 组件，并使用 onUpdated 钩子捕获每个更改 onUpdated(() => { console.log('updated'); }); 示例：https://stackblitz.com/edit/vue-5qtyjg 要观察一些属性，您需要先绑定它，例如<p :class="classes">{{ text }}</p>，也可以使用mutationObserver： const {ref, onMounted, onBeforeUnmount} = Vue const app = Vue.createApp({ data() { return { text: 'My text', classes: 'font-bold' }; }, watch: { text(newValue, oldValue) { console.log(newValue) }, classes(newValue, oldValue) { console.log(newValue) } }, methods: { addClass() { this.classes = 'font-bold color-red' } }, setup() { let observer = null let target = ref(null) let options = {subtree: true, childList: true, attributes: true} const callback = (mutationList, observer) => { for (const mutation of mutationList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log(`The ${mutation.attributeName} attribute was modified.`); } } }; onMounted(() => { target = document.querySelector(".mydiv") observer = new MutationObserver(callback); observer.observe(target, options); }); onBeforeUnmount(() => observer.disconnect()) }, }) app.mount('#demo') .color-red { color: red; } .font-bold { font-weight: 700; } <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <p class="mydiv" :class="classes">{{ text }}</p> <input v-model="text" /> <button @click="addClass">class</button> </div> 在 Vue3 中，您可以在模板中使用 ref。 文档 <p ref="myDiv" class="test">{{text}}</p> 现在您可以在模板中定义它们。 myDiv.value 将保存 DOM 元素 const myDiv = ref(null) const text= computed(() => { if(myDiv.value.classList ... rest of your logic for checking classes) return "Text" else return "Updated Text" })

如何为包装组件构建 React 元素树？

考虑我有以下应用程序结构 常量应用程序 = () => { 返回 } const 标头 = () => { 返回<>标题<...