jquery-data 相关问题


jquery 滚动到 data-image-id

我无法在包含各种图像的 div 容器上设置 id,但想要创建一个带有指向图库各个部分的跳转链接的导航。 在我的图像上设置的一个元素


Alpine.js 和 jQuery DataTables,x-on:在表内触发时单击功能不全

我的 Laravel 和 Alpine.js 刀片页面中有此表。 名字 我的 Laravel 和 Alpine.js 刀片页面中有此表。 <table id="projects-table"> <thead> <tr> <th>name</th> <th>actions</th> </tr> </thead> <tbody> @foreach($projects as $project) <tr> <td>{{ $project->name }}</td> <td><button x-data="{}" x-on:click="$dispatch('open-modal', 'edit-project')">edit</button></td> </tr> @endforeach </tbody> </table> 有了它,我有了这个 JavaScript 代码,可以将其转换为 jQuery DataTable document.addEventListener('DOMContentLoaded', function () { new DataTable('#projects-table'); }); 现在发生的情况是,当我单击 button 内的 td 时,我的模式不会触发 当表不是 DataTable 时,一切正常。 基本上发生了什么(可能),当 jQuery 操作元素时,@click 事件不会触发。有任何已知的修复方法吗?感谢所有帮助。 解决方案是将表包含在由 Alpine 控制的标签中,并在 Alpine 启动后初始化 DataTable: <div x-data> <table id="projects-table"> <!-- ..... --> </table> </div> <script> document.addEventListener('alpine:init', () => { new DataTable('#projects-table') }); </script> 通过这种方式,Alpine 可以检测到 DOM 何时被 DataTables 更改,然后重建他的引用。 否则,在您的具体情况下,您可以使用 vanilla JS 发送自定义事件并保持其他内容不变: <!-- ..... --> <td> <button onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'edit-project' }))"> Edit </button> </td> <!-- ..... --> <!-- Simple example for the modal triggering --> <div x-data="{isOpen: false}" x-show="isOpen" @open-modal.window="isOpen = true"> I'm open! <div>


jQuery Ajax 在 php 同一页面上传递值 - 更新

如何找回: 如何找回: <div id="test"> <?php if (isset($_POST['sweets'])) { ob_clean(); echo $_POST['sweets']; exit; } ?> </div> <form id="a" action="" method="post"> <select name="sweets" onchange="change()" id="select1"> <option >Chocolate</option> <option selected="selected">Candy</option> <option >Taffy</option> <option >Caramel</option> <option >Fudge</option> <option >Cookie</option> </select> </form> <!-- Script --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> function change() { var sweets = $("#select1").val(); $.ajax({ type: "POST", data: { sweets: sweets }, success: function(data) { $("#test").html(data); } }); } </script> 将值传递给 php 字符串: $string = $_POST['sweets']; <!-- I'm looking for this: --> 我希望这是可能的。我在 stackoverflow 和 google 上寻找答案,但找不到适合我的目的的答案。 对于同一个页面的ajax/PHP脚本,可以将PHP放在脚本的最前面,当有POST提交数据时以exit结束 为了使其更有意义,您应该返回与您通过 POST 提交的内容相关的内容(这是甜食的类型),作为示例,我们展示其一般定义。我们可以使用 switch,这是用于此目的的常用结构: switch ($string) { case "Chocolate": echo "Chocolate is made from cocoa beans, the dried and fermented seeds of the cacao tree"; break; case "Candy": echo "Candy is a sweet food made from sugar or chocolate, or a piece of this"; break; case "Taffy": echo "Taffy is a type of candy invented in the United States, made by stretching and/or pulling a sticky mass of a soft candy base"; break; case "Caramel": echo "Caramel is made of sugar or syrup heated until it turns brown, used as a flavouring or colouring for food or drink"; break; case "Fudge": echo "Fudge is a dense, rich confection typically made with sugar, milk or cream, butter and chocolate or other flavorings"; break; case "Cookie": echo "A cookie (American English) or biscuit (British English) is a baked snack or dessert that is typically small, flat, and sweet"; break; } exit; } ?> 所以以下是示例代码: <?php if (isset($_POST['sweets'])) { // ob_clean(); $string = $_POST['sweets']; switch ($string) { case "Chocolate": echo "Chocolate is made from cocoa beans, the dried and fermented seeds of the cacao tree"; break; case "Candy": echo "Candy is a sweet food made from sugar or chocolate, or a piece of this"; break; case "Taffy": echo "Taffy is a type of candy invented in the United States, made by stretching and/or pulling a sticky mass of a soft candy base"; break; case "Caramel": echo "Caramel is made of sugar or syrup heated until it turns brown, used as a flavouring or colouring for food or drink"; break; case "Fudge": echo "Fudge is a dense, rich confection typically made with sugar, milk or cream, butter and chocolate or other flavorings"; break; case "Cookie": echo "A cookie (American English) or biscuit (British English) is a baked snack or dessert that is typically small, flat, and sweet"; break; } exit; } ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select name="sweets" onchange="change()" id="select1"> <option value="">Please select</option> <option >Chocolate</option> <option >Candy</option> <option >Taffy</option> <option >Caramel</option> <option >Fudge</option> <option >Cookie</option> </select> <br><br> <div id="test"></div> <script> function change() { var sweets = $("#select1").val(); $.ajax({ type: "POST", data: { sweets: sweets }, success: function(data) { $("#test").html(data); } }); } </script>


jQuery DataTables 中的下拉分页

是否可以使用 jquery 数据表实现如下图所示的下拉分页?


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"));


Select2 中的样式选择选项

问题是如何在选项的一部分上应用样式。 我有一个像这样的选择: 项目 1 问题是如何在选项的一部分上应用样式。 我有一个像这样的选择: <select id="my_select"> <option value="1">Item 1 <span class="color-red">20 calls</span></option> <option value="2">Item 2 <span class="color-red">10 calls</span></option> <option value="2">Item 3 <span class="color-red">30 calls</span></option> </select> 浏览器不允许在 OPTION 中使用标签并删除它们。 因此,一个可能的解决方法是使用 HTML 实体: <select id="my_select"> <option value="1">Item 1 &lt;span class="color-red"&gt;20 calls&lt;/span&gt;</option> <option value="2">Item 2 &lt;span class="color-red"&gt;10 calls&lt;/span&gt;</option> <option value="2">Item 3 &lt;span class="color-red"&gt;30 calls&lt;/span&gt;</option> </select> 现在浏览器将每个选项的全部内容视为文本。这是 Jquery 代码: $('#my_select').select2({ minimumResultsForSearch: -1 }); 我偶然发现的最后一件事是在渲染 Select2 和下拉菜单后分别用“<" and ">”符号替换实体“<”和“">”,以默认黑色进入第一个选项框“Item 1”, “20 次通话”为红色(CSS 可用:.color-red {color:red;})。其他选项框也是如此。 我试图在文档中找到答案,但没有任何效果。例如, $('#my_select').select2({ minimumResultsForSearch: -1, templateResult: function (item) { item.text.replace (/&gt;/g,'>').replace (/&lt;/g,'<'); } }); 非常感谢任何有关如何解决此问题的想法。 您需要重写 escapeMarkup 选项以允许 HTML 内容。 在templateResult中,您告知要如何以及以何种方式呈现内容,在本例中,我在每个选项中使用数据文本属性的返回。 $('#my_select').select2({ minimumResultsForSearch: -1, escapeMarkup: function(item) { return item; }, templateResult: function(item) { return $(item.element).data('text'); } }); .color-red { color: #ff0000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> <select id="my_select" style="width: 100%;"> <option></option> <option value="1" data-text='Item 1 <span class="color-red">20 calls</span>'>Item 1 20 calls</option> <option value="2" data-text='Item 2 <span class="color-red">10 calls</span>'>Item 2 10 calls</option> <option value="3" data-text='Item 3 <span class="color-red">30 calls</span>'>Item 3 30 calls</option> </select>


在仪表针中设置弹出框(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>


你能用最简单的方法告诉我使用jquery上传文件吗?

我想使用最简单的方法通过jquery ajax上传文件。 我的代码是: ... 我想用最简单的方法通过jquery ajax上传文件。 我的代码是: <body> <form action="?" method="POST" enctype="multipart/form-data"> <input type="file" name="myfile" /><br> <input type="submit" name="submit_btn" value="Submit" /> </form> <div> <?php if (isset($_POST['submit'])) { //move_uploaded_files()... } ?> </div> </body> 当您使用网页上的表单向服务器发送数据时,您可以选择使用 GET 或 POST 方法。这些方法决定了数据如何发送到服务器。 当您将表单方法设置为 GET 时,您在表单字段中填写的数据(包括您选择的文件)会以某种方式添加到网址中。您可能已经注意到,当您提交表单时,浏览器中的 URL 会发生变化。然而,这种方法有一些局限性。它不适合发送大块数据(例如文件),并且以这种方式发送的数据量有最大限制。 另一方面,当您使用 POST 方法时,您输入表单的数据会以不同的方式发送,有点像后台的隐藏包。它更适合包含文件在内的大量数据。这就是当您将表单方法更改为 POST 时文件上传有效的原因。服务器知道如何处理此类数据并正确存储它。 在您的具体情况下,当您将表单方法更改为 GET 时,$_FILES 数组无法按预期工作,因为它旨在处理使用 POST 方法发送的数据。这有点像试图在方孔中安装圆钉 - GET 方法并非旨在像 POST 那样处理文件上传。 如果你确实需要使用GET方法并且仍然想上传文件,那就有点棘手了。您可能需要发挥创意,以可添加到 URL 的方式对文件数据进行编码,但由于各种问题,这并不是处理文件的最佳方式。 一般来说,对于文件上传,使用POST方法会更好。它确保您的文件安全地到达服务器,并避免尝试将像文件这样的大东西放入像 URL 这样的小空间中的复杂性。如果您决定使用 GET,您可能需要考虑不同的方法来实现您的目标,例如将文件临时存储在服务器上并通过 URL 传递对这些文件的引用。 那是因为 GET 请求没有正文,而这就是文件所在的位置


jQuery 验证插件:仅接受字母字符?

我想使用 jQuery 的验证插件来验证只接受字母字符的字段,但似乎没有明确的规则。我搜索过谷歌但我发现没有......


在 jQuery 中通过 onclick 属性选择元素

我有这个标记: 我的问题:如何选择第二个链接


单击 p 标签旁边的按钮时获取 p 标签的内部文本(无 Jquery)

我有几个盒子,每个盒子都包含按钮和一个 元素,其内部文本是由 API 中的数据创建的。我在每个框上放置了一个 onclick(包裹 的 ) 我有几个盒子,每个盒子都包含按钮和一个 <p> 元素,其内部文本是由 API 中的数据创建的。我在每个框上放置了一个 onclick(包裹 <div> 元素和按钮的 <p>)。我希望每次单击该按钮时,位于该按钮旁边(位于同一 div 中)的 innerText 标签的 <p> 都会控制台日志。目前无法弄清楚,这就是我到目前为止所得到的: const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => { return containerShapes.innerHTML += `<div class="shape-box" onclick="showName(event)"> <p>${item.name}</p> <button>Select</button> </div>` })) function showName(e) { console.log() } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"> </div> </body> 您可以使用最近的。当您需要 forEach 或正确使用地图时也不要使用地图 我还强烈建议授权(点击 div) const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => containerShapes.innerHTML = data.results .map(({name}) => `<div class="shape-box"> <p>${name}</p> <button>Select</button> </div>`)); containerShapes.addEventListener("click", e => { const tgt = e.target.closest("button") if (tgt) console.log(tgt.closest("div.shape-box").querySelector("p").innerText) }) #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 要获取名称,由于事件位于整个 div 上,因此您需要使用 querySelector 并找到内部 <p> 元素并获取其文本。 const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => containerShapes.innerHTML += `<div class="shape-box" onclick="showName(this)"> <p>${item.name}</p> <button>Select</button> </div>` )) function showName(box) { const name = box.querySelector('p').textContent; console.log(name); } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 执行此操作的另一种方法是将单击事件仅添加到按钮,然后查找 closest 形状框,然后找到 <p>。 const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => containerShapes.innerHTML += `<div class="shape-box"> <p>${item.name}</p> <button onclick="showName(this)">Select</button> </div>` )) function showName(button) { const name = button.closest('.shape-box').querySelector('p').textContent; console.log(name); } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 嘿,我最近找到了解决此问题的简单方法(当然,如果您的文本不像按钮文本那样太长):您可以将内部文本作为元素的 id 提供。并且在事件处理程序中,您可以通过以下方式访问内部文本:这样:e.target.id希望这个解决方案可以帮助你:)


如何解决错误“as.data.frame.default(data) 中的错误:无法强制类‘“lm”’到 data.frame”

abc4 <- lm(Sales~., data=abc4) summary(abc4) abc5 <- lm(Sales~ T+June+July+August+September+October+November+December, data=abc4) summary(abc5) I'm trying to run regression. If I run the fi...


JQuery run的load方法之后如何运行脚本?

我有一段代码在 Jquery 中进行加载并加载一个页面,加载该页面后我必须执行一些函数,但这些函数是在所有页面加载之前运行的,g...


应用程序定制器和多个Web部件中的jquery和bootstrap

是个人选择使用bootstrap进行定制。因此,我计划在应用程序定制器和多个 Web 部件中使用 jQuery 和 Bootstrap。对此最好的方法是什么?我正在尝试...


获取突出显示/选定的文本

是否可以获取网站段落中突出显示的文本,例如通过使用 jQuery?


防止用户在描述字段中添加任何脚本/jquery/sql 查询

我正在尝试为描述字段添加一些验证,以检查用户是否输入了任何脚本/js/jQuery/SQL 查询代码而不是真正的产品描述。 // 检查是否不允许


简单项目Jquery简单计算器

我目前正在学习和练习我的前端 Web 技能,以使用 Jquery 创建一个简单的 Web 应用程序。我决定制作一个简单的计算器。我可以使用一些带有输入 nu 的函数轻松完成...


调查表问题:调查表功能显示的观测值数量与数据中的实际观测值数量不同

数据<- data.frame(X =c(1,4,6,4,1,7,3,2,2),Y = c(6,5,9,9,43,65,45,67,90),weight=c(0.1,1.2,4,0,0,5,0.65,1,0)) dat_design <- svydesign(ids = ~1, data = Data, weights = Data$weight) ab=


是否有一个事件会在 jQuery 中的scrollHeight 或scrollWidth 发生更改时触发?

我正在使用 JQuery 设计一个应用程序,用户可以在 div 内拖动元素,该 div 会自动添加滚动条并根据需要扩展滚动高度/滚动宽度。我需要开火...


jquery jqxgrid 自动换行

$('#tGrid').jqxGrid( { 主题:“ui-雷蒙德”, 宽度:'100%', 自动高度:真实, 来源:数据适配器, 显示过滤行:真, 可过滤:真实...


为 Data Fusion 或 Cloud Composer 实例分配静态 IP

我正在尝试使用 Google Data Fusion 连接到 Microsoft SQL Server 数据库,并且需要有一个静态 IP。 我尝试在子网上配置静态 IP 并将其连接到 Data Fusion ...


获取世博会资产

访问世博会资产的正确方法是什么? 我试过这个: 等待 Asset.loadAsync(require('file:///assets/data/catalog.json')); 错误: 无法解析“file:///assets/data/catalog.json”...


在项目中使用 MasterPage.master 时 ASP.NET 如何加载页面?

Links.aspx 基于 MasterPage.master。 答:MasterPage.master、MasterPage.master.cs、Links.aspx 和 Links.aspx.cs 之间的加载顺序是什么? B: jquery-3 的加载顺序是怎样的....


jQuery HTML5 范围滑块中的实时输出

我正在尝试将 HTML5 输入范围滑块的实时输出获取到 JavaScript 变量中。现在,我正在使用 我的方式就是这样


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

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


在添加新行时刷新 html 可编辑表格 - Bootstable

我使用 boostable 插件在运行时内联编辑 HTML 行。该插件位于 https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html。问题是现在当我想要的时候


悬停图像时的悬停效果

我想制作悬停效果,当悬停图像时,如下所示: 在网上找到了很多类似的例子,但都是用jquery或js。我想知道是否可以做


为什么没有从指针到引用的隐式转换到const指针[重复]

我将用代码来说明我的问题: #包括 void PrintInt(const unsigned char*& ptr) { 整数数据=0; ::memcpy(&data, ptr, sizeof(data)); // 推进 po...


select2:使单选的高度与多选的高度匹配?

我正在使用令人惊叹的 select2 jquery 插件。我想让单选框的高度与多选框的高度相匹配。 我尝试过各种 CSS 修复,包括: .select2-


调整 ggplot 条形图中的 x 轴标签

我想移动上方平均线下方的条形标签。 我正在使用这段代码来制作这个图表 水平 <- mean(data$SPAD) quux <- data %>% 选择(基因型,规格...


AOS 中的数据绑定 - 可能吗?

我在我的角度项目中使用滚动动画,我有一堆图像,我想一个接一个地显示它们。 我在我的角度项目中使用滚动动画,我有一堆图像,我想一个接一个地显示它们。 <div class="img-gallery"> <div *ngFor="let imgSrc of images" data-aos="zoom-in"> <img [src]="imgSrc"> </div> </div> 我想为每个包装 div 添加 data-aos-delay 指令,就像这样 <div *ngFor="let imgSrc of images; let i = idnex" data-aos="zoom-in" [data-aos-delay]="i * 100"> <img [src]="imgSrc"> </div> 但是,不出所料 - 它向我显示了错误 无法绑定到“data-aos-delay”,因为它不是“div”的已知属性 我怎样才能实现它?任何实施都将感激地接受 可以改成下面吗 <div *ngFor="let imgSrc of images; let i = idnex" data-aos="zoom-in" data-aos-delay="{{i * 100}}"> <img [src]="imgSrc"> </div>


如何使用 ssp.class.php 连接两个表

我开始使用 jQuery 的 DataTables Table 插件并遇到了一些问题。我正在使用这里的示例代码。 我的 MySQL 表看起来像这样: 编号 |名称 |父亲 ID father_id 是 va...


运行 npx json-server --watch Data/db.json --port 8000 时,它会抛出一个新错误

每当我运行 npx json-server --watch Data/db.json --port 8000 时,它都会抛出错误 类型错误 [ERR_PARSE_ARGS_UNKNOWN_OPTION]:未知选项“--watch”。要指定位置参数星...


使用 jquery 每隔几秒突出显示列表中的不同单词

我有一个格式为“xxx - yyy - zzz”的单词列表,因此“ - ”是分隔符。我希望做的只是每隔几秒随机增加一个单词的大小......


jQuery .append Onchange 事件多次触发

我有一个表单,应该在更改时将一些值附加到“注释”文本区域中。我有几个这样的,虽然有些工作得很好,但其他的则附加了 3 次文本。这是 c...


有没有办法在有条件的情况下隐藏v-data-table中的展开按钮?

借助 v-data-table 中的“show-expand”属性,展开按钮会显示在数据表的所有行中。 借助 v-data-table 中的“show-expand”属性,展开按钮会显示在数据表的所有行中。 <v-data-table :expanded.sync="expanded1" :headers="headers1" :items="items" show-expand class="elevation-1" > 有没有办法根据 Vuetify 3 中的条件进行渲染? 在 Vuetify 2 中,使用 item.data-table-expand 插槽来实现此目的。 <template #item.data-table-expand="{ item, expand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="expand(!isExpanded)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template> 但是,在 Vuetify 3 中使用相同的代码块会返回类型错误: Uncaught TypeError: expand is not a function expand 现在是 toggleExpand 并期望 internalItem 插槽道具 <template #item.data-table-expand="{ item, internalItem, toggleExpand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="toggleExpand(internalItem)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template>


带有 std::enable_if 的嵌套模板类,C++

我有一个模板类B,其第一个参数T1必须继承类A,第二个参数T2用于嵌套类C: A 类 { ... }; 模板 我有一个模板类B,其第一个参数T1必须继承类A,第二个参数T2用于嵌套类C: class A { ... }; template<typename T1, typename T2 = T1, typename = std::enable_if_t<std::is_base_of<A, T1>::value>> class B { class C { T2 data; C(T2 data); void func(); ... }; ... }; 问题是当我尝试定义嵌套类的构造函数和方法时出现错误: template<typename T1, typename T2, typename> B<T1, T2>::C::C(T2 data) : data(data) { ... } template<typename T1, typename T2, typename> void B<T1, T2>::C::func() { ... } E0464“B::value, void>>::C”不是类模板; C3860 类类型名称后面的类型参数列表必须按照类型参数列表中使用的顺序列出参数。 如果我不使用嵌套类或不使用 std::enable_if,代码可以正常工作,但在这里我需要它们,而且我真的不明白出了什么问题。 定义构造函数时仍然需要提供默认的模板参数: template<typename T1, typename T2, typename D> B<T1, T2, D>::C::C(T2 data) : data(data) { } 或者,由于最后一个参数仅用于 SFINAE 目的并且始终旨在为 void,因此您可以编写: template<typename T1, typename T2> B<T1, T2, void>::C::C(T2 data) : data(data) { } 请注意,最好在 C 中定义构造函数。 无论如何,大多数时候你都无法将模板拆分为标头/源代码,并且处理类模板的外线定义可能非常烦人且脆弱。 C++17 和 C++20 的注意事项 如果您使用的是 C++20,您可以编写: template<std::derived_from<A> T1, typename T2 = T1> class B { /* ... */ }; template<std::derived_from<A> T1, typename T2> B<T1, T2>::C::C(T2 data) : data(data) { } 如果您使用的是 C++17,您至少可以使用辅助变量模板std::is_base_of_v<A, T1>。


将 Spring Data Rest 与反应式存储库一起使用时,FluxUsingWhen 无法转换为 Iterable 错误

我配置了一个 ReactiveSortingRepository 来查看 Spring Data Rest 上的反应功能,过去我主要使用 PagingAndSortingRepository 将资源公开为 REST 端点,所以想要...


如果目标是动画按钮,jquery animate 将不起作用

所以我有一个设计,每 X 秒查询一次新数据。为了控制这个,我有 3 个按钮:停止、启动和刷新。 Stop 停止间隔,start 重新启动间隔,刷新应该......


OpenEdge ABL JSON 到临时表:READ-JSON

我如何将其(如下)读取到临时表中: { “参数”:{ }, "data": "{\"姓名\":\"morpheus11\",\"工作\":\"leader1221\"}&qu...


JQuery UI Datepicker:选择出发日期时自动弹出返回日期

我有两个输入字段,用户可以在其中指定出发和返回日期。 我正在尝试实现一种情况,当用户选择出发日期时,日期选择器会自动...


如何更改“AreYouSure”插件中的显示弹窗

我有一个表单,如果用户更改了某些控件但没有单击“保存”按钮,我希望显示一条弹出消息。 我希望使用 jQuery AreYouSure 插件。 我正在尝试显示不同的显示


使用 jQuery/Javascript 用 HTML 标签包裹字符串的每个字母

我需要能够获取一串文本并用 HTML 标签将每个字母包裹在该字符串中,例如 或 (现在不重要)。 到目前为止我已经得到了这个,但它不是...


将鼠标悬停在单元格上时获取表格单元格(td)的工具提示

如何让此查询在 td 具有 id="tooltipexcess" 的每一行上显示工具提示? 在具有动态行数的表中,我尝试使用 jquery mouseoover 和工具提示来显示...


如何将可疑链接添加到我的 asp.net 网站

我有一个简单的 asp.net 网站。最近,我注意到它在外部添加了一个带有锚标记的 div。我还注意到来自第三方网站的另一个明显的 jQuery 文件链接,该链接...


调试 jQuery 代码以获取所有行的总数(票证类型)

我正在开发票务小部件。门票类型很少,每种门票类型还有 3 种门票选项。当用户开始输入一种门票类型的数量时,其他门票的门票选项


如何将自定义用户类型作为参数传递给 Spring Data JPA 查询方法?

我有一个 Spring data JPA 存储库,它由 postgresql 数据库支持。作为查询的一部分,我想在查询中使用间隔。我设法通过创建一个 SQLFunction 来实现它...


Jquery 使用 varA varB varC 在 <textarea> 中输入文本

我不知道如何在 Jquery 中编码: 我住在varA varB VarC 文本:我住在:通过输入输入文本 varC :将从 select 中获取,例如: 我不知道如何在 Jquery 中编写代码: <textarea>I am living in varA varB VarC</textarea> 文本:我住在:通过输入输入文本 varC :将从 select 中获取,例如: <select name="city" id="city"> <option value="1">City1</option> <option value="2">City2</option> </select> 当客户选择选择城市时,varC 将显示 City1 或 City2,但当他们重新选择时,varC 也会相应更改。所选地区和病房的 varA 和 varB <select name="district" id="district"> <option value="1">District1</option> <option value="2">District</option> </select> <select name="ward" id="ward"> <option value="1">Ward1</option> <option value="2">Ward</option> </select> 感谢您对我的帮助! 你可以做类似的事情。正如人们所说,Stackoverflow 社区并不是为你编写代码。雇用一名开发人员... $('select').on('change',function(){ let district = $('#district').val() let ward = $('#ward').val() let city = $('#city').val() $('textarea').val('I am living in '+district+' '+ward+' '+city) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="district" id="district"> <option value="District1">District1</option> <option value="District">District</option> </select> <select name="ward" id="ward"> <option value="Ward1">Ward1</option> <option value="Ward">Ward</option> </select> <select name="city" id="city"> <option value="City1">City1</option> <option value="City2">City2</option> </select> <textarea>I am living in varA varB VarC</textarea>


未捕获类型错误:无法读取未定义的属性“顶部”

如果这个问题已经得到解答,我深表歉意。我尝试寻找解决方案,但找不到适合我的代码的解决方案。我对 jQuery 还是个新手。 我有两种不同类型的粘性...


从 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"


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