这是我的html {% if t_ques %} 今天 {% 表示 t_... 中的项目这是我的html <ul class="conversations"> {% if t_ques %} <li class="grouping">Today</li> {% for item in t_ques %} <li class="active"> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if y_ques %} <li class="grouping">Yesterday</li> {% for item in y_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if s_ques %} <li class="grouping">Previous 7 days</li> {% for item in s_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if more_s_ques %} <li class="grouping">Previous 30 days</li> {% for item in more_s_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} </ul> </div> 我一直在尝试使用 JavaScript 单击时获取任何 data-pk 的值，但似乎无法实现。这一直说 currentTarget 未定义，当我用 target 替换它时，它说同样的事情。然后，如果我将其替换为 document.querySelector("#convers")，它只会给出第一个值，无论单击哪个这是我的 JavaScript const conversationButtons = document.querySelectorAll("#convers"); conversationButtons.forEach(button => { button.addEventListener("click", getId); }); function getId(e){ var idValue = e.currentTarget.getAttribute('data-pk'); console.log(idValue); //output corresponding target-id if(!chat_id){ url = `/chat-previous/${idValue}/` }else{ url = 'initiate-chat/' } return url; } $.ajax({ type: 'POST', url: getId(), data: { message: usermsg, chatId: chat_id, // itemId: item_id, csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(), action: 'post' }, success: function(json){ const res = json['chats'] setTimeout(() => { hideTyping(); body.appendChild(mgses(res, "assistant")); scrollToBottomOfResults(); }, 1000); console.log(json) }, error: function(rs, e){ setTimeout(() => { hideTyping(); body.appendChild(setBotResponse("bot")); scrollToBottomOfResults(); }, 600); console.log(rs.error); }, }); 我使用了其他方法，例如 const getId = () => { console.log(document.querySelector(".conversation-button").getAttribute('data-pk')) if(!chat_id){ url = `/chat-previous/${document.querySelector(".conversation-button").getAttribute('data-pk')}/` }else{ url = 'initiate-chat/' } return url; } conversationButtons.forEach(button => { button.addEventListener("click", getId); console.log(button.getAttribute('data-pk')); }); 仍然无法得到我真正想要的。有什么方法可以实现这个目标吗？委托并使用按钮的类 document.querySelector('.conversations').addEventListener('click', (e) => { let tgt = e.target.closest('.conversation-button'); if (!tgt) return; const idValue = tgt.dataset.pk; console.log(idValue); //output corresponding target-id return chat_id ? 'initiate-chat/' : `/chat-previous/${idValue}/` }) 您做出了多个错误的假设，第一个是您不能有多个具有相同 id 的元素，这将导致您描述的确切行为“它需要第一次出现的 id” 第二件事是你可能想在点击时发出ajax请求，但你构建代码的方式并不能做到这一点。要解决这些问题，请生成如下 html button.conversation-button button.conversation-button button.conversation-button 然后向所有具有 .conversation-button 类的元素添加一个事件侦听器，并将您的 ajax 调用包装到一个函数中，主要是您已经拥有的函数。 const conversationButtons = document.querySelectorAll(".conversation-button"); conversationButtons.forEach(button => { button.addEventListener("click", doStuff); }); ... function doStuff(e) { $.ajax( ... url: getId(e) ... } function getId(e) { let idValue = e.currentTarget.getAttribute('data-pk'); let url = ...; ... return url; // } 只是一些伪代码让你得到一个想法，祝你好运:)

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

有没有办法在有条件的情况下隐藏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>

何时切换搜索栏和徽标下降？

.navbar { 背景颜色：#F91F46； } .src-bar { 边框：0；边框半径：5px；概要：无；左内边距：15px；宽度：30vw； } .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="img/Logo.avif" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <div class="justify-content-end"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </div> </nav> 切换时，我希望折叠 div 居中。我知道原因 - 我将折叠和切换 btn 放在 justify-end div 内，因为我需要切换 btn 位置位于右侧。现在，当切换时，我的折叠位于右侧，但我希望在切换时，折叠div到中心。当我删除 justify-end div 时，它位于左侧，但如果删除它，每个导航元素都会移动到 nav 和 md 视图中 lg 的左侧。看起来像这样或中心我们确实需要将 .nav-collapse 移到 justify-end 元素之外，才能在较窄的视口上获得所需的布局。要将菜单显示在右侧，请通过 flex-grow: 1 类将 .nav-collapse 应用于 flex-grow: 0 元素，覆盖 flex-grow-0 上的默认 .nav-collapse。为了使窄视口的链接元素居中，.navbar-nav中的元素采用垂直柔性布局，因此我们可以通过align-items: center类应用align-items-center： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> 您还可以考虑通过 text-align: center 类应用 text-center，将链接元素 text 居中： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav>

用 Bootsrap 制作的网站右侧的空间不会消失吗？

无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact | Enba Camping</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="style/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>  <div class="container-fluid"> <div class="row"> <div class="col-sm-12 p-0"> <nav class="navbar navbar-expand-lg bg-body-tertiary p-0 "> <div class="container-fluid bg-dark "> <a class="navbar-brand text-light mb-2" href="index.html">Enba Camping</a> <button class="navbar-toggler btn btn-light btn btn-outline-light bg-light m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link text-light text-center" aria-current="page" href="index.html">Home</a> <a class="nav-link text-light text-center" href="aboutus.html">About us</a> <a class="nav-link active text-light text-center" href="contact.html" aria-disabled="true">Contact</a> </div> </div> </div> </nav> </div> </div> </div>   <div class="container-fluid p-0 bg-dark text-light"> <div class="row"> <div class="col-sm-6 ps-0"> <img src="images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg" alt="" class=" d-block w-100 c-img "> </div> <div class="col-sm-6 d-flex justify-content-center align-items-center "> <div class="text-center"> <h2 class="fw-bold display-4 ">Bize Ulaşın</h2>  <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Adınız</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Name"> </div> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email Adres</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email Address"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Mesajınız</label> <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" rows="3"></textarea> </div> <div class=" gap-2 d-md-block "> <button class="btn btn-light " type="button">Send</button> </div> </div> </div> </div> </div>   <div class="container mt-sm-5"> <div class="row text-center "> <h1 class="d-flex justify-content-center">Mekanlarımız</h1> <hr> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Karavan Parkı</h5> <p class="card-text">Ormanın içinde konumlanan karavan parkımız, tam anlamıyla bir doğa kaçamağı sunuyor. Ormanın huzurlu atmosferinde kendinizi kaybedin. Karavanınızla konforlu bir konaklama deneyimi yaşayın.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız </a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Çadırlı Kamp</h5> <p class="card-text">Orman içi çadırlı kamp alanımız, doğa severler için bir cennet. Gölgeli ağaçlar arasında konumlanan çadırlarımızda, kuş cıvıltıları ve huzur içinde bir konaklama deneyimi sizi bekliyor.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dağ Evi </h5> <p class="card-text">Dağ evimiz, şehrin gürültüsünden uzak,huzurlu bir konaklama imkanı sunuyor. Ferah odalarımızda dağ manzarasının keyfini çıkarabilir, gölet kenarındaki aktivitelerle vakit geçirebilirsiniz.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> </div> </div>   <div class="row my-4"> <div class="col-sm-12"> <h1 class="d-flex justify-content-center">Galeri</h1> <hr> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/hichem-meghachou-7I-Rj_E9ihI-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/jimmy-conover-J_XuXX9m0KM-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/josh-campbell-UbbjVyibFuc-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/shelby-cohron-ESNV6KmLJMg-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/tegan-mierle-fDostElVhN8-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/toa-heftiba-x9I-6yoXrXE-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> </div>   <div class="bg-dark text-light"> <div class="container"> <footer class="pt-5 mt-5 "> <div class="row "> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column "> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-md-5 offset-md-1 mb-3"> <form> <h4> Abone Ol ve Doğanın Güzelliklerini Kaçırma!</h4> <p class="fs-6">Doğanın kucaklayıcı atmosferine adım atmak, huzurla dolu anlar yaşamak ve Enba Camping'in sunduğu özel fırsatları kaçırmamak için hemen abone ol! Sitemize abone olarak, doğanın gizemli güzellikleri, özel indirimler ve etkinliklerden ilk sen haberdar olacaksın.</p> <p class="fs-6"> Unutulmaz anılar biriktirmek ve doğanın kollarında huzurlu bir deneyim yaşamak için abone ol, Enba Camping'in eşsiz dünyasına adımını at! 🏕️✨ </p> <div class="d-flex flex-column flex-sm-row w-100 gap-2"> <label for="newsletter1" class="visually-hidden">Email address</label> <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> <div class="d-flex flex-column flex-sm-row justify-content-between border-top"> <p>© 2023 Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#twitter"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#instagram"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#facebook"></use> </svg></a></li> </ul> </div> </footer> </div> </div>  </body> </html> 和CSS .jumb { vertical-align: inherit; } p { font-size: 24px; } .c-item { height: 480px; } .c-img { height: 100%; object-fit: cover; filter:brightness(0.9) } 这里。我不希望页面左右移动。我想让它适合全屏，但容器结构溢出了请将这段代码添加到您的 CSS 文件中。然后，它就会起作用。 .row{ margin-right: 0px; }

从 html 中提取 <h2> 标题文本，其中标题文本可能包含换行符

从数据库表中选择选择选项后如何显示/隐藏隐藏的 Div？

以下是选择选项的代码：这是选择选项的代码： <div class="modal-body row"> <form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data"> <div class="form-group col-md-6"> <label for="exampleInputEmail1"><?php echo lang('categorie'); ?></label> <select class="form-control m-bot15" name="categorie" value='' id="p_category"> <option value="#"> Sélectionner catégorie</option> <?php foreach ($categories as $category) { ?> <option value="category"><?php if (!empty($setval)) { if ($category->category == set_value('category')) { echo 'selected'; } } if (!empty($patient->category)) { if ($category->category == $patient->category) { echo 'selected'; } } ?> > <?php echo $category->category; ?> </option> <?php } ?> </select> </div> 这是应该显示/隐藏的 Div： <div class="form-group col-md-6" id="divCacher" style="display: none"> <label for="exampleInputEmail1"><?php echo lang('name_husband'); ?></label> <input type="text" class="form-control" name="name_Us" id="nameUs" placeholder=""> <label for="exampleInputEmail1"><?php echo lang('number_pregnancy'); ?></label> <input type="number" class="form-control" name="number_pregnancy" id="nbreEnfants" placeholder=""> </div> 这是 JavaScript 代码： $(document).ready(function () { $('.divCacher').hide(); $(document.body).on('change', '#p_category', function () { var v = $("select.p_category option:selected").val() if (v == 'Fe_Ence') { $('.divCacher').show(); } else { $('.divCacher').hide(); } }); }); 我希望如果我们选择 Fe_Ence 类别，则 div 会显示，否则，它会保持隐藏您需要将 $category 设置为选项值更改此： <option value="category"> 对此： <option value="<?=$category?>"> 以下是适用于更多此类情况的示例：  <select id="p_category"> <option value=""> Sélectionner catégorie</option> <?php foreach ($categories as $category): ?> <option value="<?=$category?>"><?=$category?> <?php endforeach;?> </select>  <div class="cat-container" data-id="test1"> <h1>This is Test1 Category</h1> </div> <div class="cat-container" data-id="Fe_Ence"> <h1>This is Fe_Ence Category</h1> </div> <div class="cat-container" data-id="test3"> <h1>This is test3 Category</h1> </div> // Javascript code checkCategory(); $("#p_category").on('change', checkCategory) function checkCategory() { $('.cat-container').hide() const selected = $('#p_category').val() if (!selected) return; $(`[data-id=${selected}`).show() }

如何利用v-data-table中的item-class来增加字体大小？

我对 VueJs 比较陌生，并尝试将我的 v-data-table 项目（Vuetify 2）中的字体大小更新为 20px。在这样做的过程中，我遇到了物品等级。这种方法对 chang 来说是成功的...

我如何根据状态更改按钮颜色（绿色表示“接受”，红色表示“删除”）

如何根据状态更改按钮颜色（绿色表示“接受”，红色表示“删除”）我是新人，为此使用 Laravel 框架。这是我的观点如何根据状态更改按钮颜色（绿色表示“接受”，红色表示“删除”）我是新人，为此使用 Laravel 框架。这是我的看法 <table class="table table-striped" id="example"> <thead> <tr> <th>ID no</th> <th>Form Name</th> <th style="text-align: center">Update</th> <th>Delete</th> <th>Status</th> </tr> </thead> @foreach($form as $show) {{--modal--}} <div class="modal fade mj_popupdesign mj_checkoutpopup" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2"> <div class="row"> <div class="mj_pricingtable mj_greentable mj_login_form_wrapper"> <form> <div class="mj_login_form"> <p>Are you sure you want to delete this post?</p> <br> <a href="" class="mj_btn btn btn-default pull-right glyphicon glyphicon-remove "> No</a> <a href="{{url('deleteForm',$show->id)}}" class=" pull-right mj_btn btn btn-danger glyphicon glyphicon-ok"> Yes</a> </div> </form> </div> </div> </div> </div> </div> </div> </div> {{--end modal--}} <tbody> <tr> <td> <p> {{$show->id}}</p> </td> <td> <h6><a href="{{url('JobDetails',$show->id)}}"style="color: rgb(0, 191, 243);font-size:18px;float: left;margin: 0;text-align: left">{{$show->jobTitle}}</a> </h6> <p> {{$show->created_at}} </p> </td> <td> <a href="{{url('UpdateFormView',$show->id)}}"> <span class="mj_btn btn btn-success">Update</span> </a> </td> <td> <span class="mj_btn btn btn-danger" data-toggle="modal" data-target="#myModal2">Delete</span> </td> <td><span class="mj_btn btn btn-warning">pending</span> </td> </tr> </tbody> @endforeach </table> </div> </div> </div> </div> 在我的控制器中public function AcquiredForm() { $acquired="Requirement Form"; $acquireForm=Job::where('jobType','LIKE','%'.$acquired.'%'); $form = $acquireForm->get(); return view('private-pages.company.aquire-form',compact('form')); } 数据库状态默认为待处理数据库状态默认为pending 我在代码中没有看到 status 属性，但显示状态为待处理的纯字符串 <span class="mj_btn btn btn-warning">pending</span>  <span class="mj_btn btn btn-warning">{{ $show->status }}</span> 假设它确实存在，你可以做 <td> @if ($show->status === 'Accept') <span class="mj_btn btn btn-green">Accepted</span> @elseif ($show->status === 'Delete') <span class="mj_btn btn btn-danger">Deleted</span> @else <span class="mj_btn btn btn-warning">Pending</span> @endif </td> 参见：https://laravel.com/docs/5.1/blade#displaying-data <td> @if ($show->jobstatus === "Accepted") <span class="mj_btn btn btn-success">Accepted</span> @elseif ($show->jobstatus === "Rejected") <span class="mj_btn btn btn-danger">Rejected</span> @else <span class="mj_btn btn btn-warning">Pending</span> @endif </td> 或者当你使用 1. laravel esialy customaize this code nad add automatic refresh in the page to more interactive @php if($da->status == "requested") { echo "<td><button class='btn btn-primary'>Requested</button></td>"; } else { echo "<td><button class='btn btn-success'>Ordered</button></td>"; } @endphp

脚本无法在我的引导模式中工作

希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html 希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本，我尝试加载此页面： 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们，它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达，因为加载页面时已经触发了此事件（模态在之后加载...）尝试直接插入脚本，如下所示： <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时，shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });

带有 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>。

表单响应：“无法处理请求 HTTP ERROR 500”。我做错了什么？

我尝试在网站上编写 php 表单，但收到错误 500。我无法弄清楚我做错了什么。你能看一下代码看看我做错了什么吗？ PHP：我尝试在网站上编写 php 表单，但收到错误 500。我无法弄清楚我做错了什么。你能看一下代码看看我做错了什么吗？ PHP： <?php // define variables and set to empty values $name = $email = $phone = $enquiry = ""; if ( $_SERVER[ "REQUEST_METHOD" ] == "POST" ) { if ( empty( $_POST[ "name" ] ) ) { $nameErr = "Name is required"; } else { $name = test_input( $_POST[ "name" ] ); // check if name only contains letters and whitespace if ( !preg_match( "/^[a-zA-Z-' ]*$/", $name ) ) { $nameErr = "Only letters and white space allowed"; } } if ( empty( $_POST[ "email" ] ) ) { $emailErr = "Email is required"; } else { $email = test_input( $_POST[ "email" ] ); // check if e-mail address is well-formed if ( !filter_var( $email, FILTER_VALIDATE_EMAIL ) ) { $emailErr = "Invalid email format"; } } if ( empty( $_POST[ "phone" ] ) ) { $comment = ""; } else { $comment = test_input( $_POST[ "phone" ] ); } if ( empty( $_POST[ "enquiry" ] ) ) { $comment = ""; } else { $comment = test_input( $_POST[ "enquiry" ] ); } } // Create the email and send the message $destination = "[email protected]"; $subject = "Website Contact Form Enquiry: $name"; $body = "You have received a new message from your website contact form.\\n\\n"."Here are the details:\\n\\nName: $name\\n\\nEmail: $email\\n\\nPhone: $phone\\n\\nEnquiry:\\n$enquiry"; $header = "From: [email protected]\\n"; $headers = array(); $headers[] = "MIME-Version: 1.0"; $headers[] = "Content-type: text/plain; charset=iso-8859-1"; $headers[] = "From: " . $fromAddress; $headers[] = "Subject: " . $subject; $headers[] = "X-Mailer: PHP/".phpversion(); mail($destination, $subject, $message, implode("\r\n", $headers)); // mail($to,$subject,$msg,$headers); echo "Email successfully sent."; ?> HTML 格式： <form id="contact-form" method="post" action="/contact.php" role="form"> <div class="messages"></div> <div class="controls"> <div class="row"> <div class="col-md-10"> <div class="form-group"> <input id="form_name" type="text" name="name" class="form-control" placeholder="Name*" required="required" data-error="Your name is required." > <div class="help-block with-errors"></div> </div> </div> <div class="col-md-10"> <div class="form-group"> <input id="form_email" type="email" name="email" class="form-control" placeholder="Email*" required="required" data-error="Valid email is required." > <div class="help-block with-errors"></div> </div> </div> <div class="col-md-10"> <div class="form-group"> <input id="form_phone" type="text" name="phone" class="form-control" placeholder="Phone" > <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-10"> <div class="form-group"> <textarea id="form_enquiry" name="enquiry" class="form-control" placeholder="Enquiry*" rows="6" required="required" data-error="Please, leave us a message."></textarea> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <input class="btn btn-large btn-primary centre mt-10" type="submit" value="Submit" > </div> </div> </div> </form> 我已按照其他人的指示使表单正常工作，但所做的更改仍然会出现错误。这是一个简单的形式，但我似乎对我做错了什么缺乏了解。请帮助我。如果您查看发送邮件的行，这是一个硬行结尾，将 $headers 推到新行上吗？这将调用 500 错误。查看 /var/log/apache2/error.log（如果您使用的是 Debian）或 /var/log/httpd/error.log（如果使用的是 RHEL 或类似系统）。您的代码存在许多问题，但首先关注快乐的道路，然后让事情正常运行。

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>

Tailwind 和 CSS 动画环偏移缩小

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px]" src="/images/Avatar1.png" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div> 如何为任何 css/tailwind 解决方案的偏移环的过渡设置动画？例如，这 2 个缩略图，左边的缩略图悬停在其上，右边的缩略图是初始状态。我希望它在缩略图悬停时有一个缩小的动画，而不是我当前的动画，因为它非常突然您可以考虑应用包含 transition-property 的 box-shadow CSS 值，例如 transition 或 transition-all Tailwind 类，以及非 0 transition-duration，上述类名也设置了： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition" src="https://picsum.photos/90/90" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div> 否则，您可以考虑通过 transition-property: box-shadow Tailwind 类应用 transition-duration: 150ms; 和 transition-[box-shadow]（以及其他属性）以仅转换 box-shadow： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition-[box-shadow]" src="https://picsum.photos/90/90" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div>

单击嵌套跨度时禁用父按钮的单击效果

当我点击问号时，按钮父级有点击效果（这里是蓝色）是否可以禁用它？当我点击问号时，按钮父级有点击效果（这里是蓝色）可以禁用它吗？ <h:commandLink styleClass="btn btn-primary btn-lg" style="width: 100%;"> <span class="fa fa-trash"/> <span id="spanQuestion" class="fa fa-question" data-content="Help" data-html="true" data-popover="true"/> </h:commandLink> const span = $('#spanQuestion'); span.on("click", function(e) { e.stopPropagation(); }); 我试图停止对父项的点击，添加背景颜色。我希望父按钮不会有点击效果。 ` 常量按钮 = $('#myButton'); const span = $('#spanQuestion'); span.on("click", function (e) { e.stopPropagation(); }); button.on("click", function (e) { // Your button click logic here }); `

向垫子表添加额外的行

所以我有一张垫子桌所以我有一张垫子桌 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.name"> <mat-header-cell *matHeaderCellDef cdkDrag dkDragLockAxis="x" cdkDragBoundary="mat-header-row"> {{ column.title }} </mat-header-cell> <mat-cell *matCellDef="let element"> {{ element[column.name] }} </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table> 但我需要在表标题下为相应的行过滤器添加一行。我尝试在标题和实际行声明之间添加 <mat-row> ，但是由于过滤器是不同的输入（例如数字、自动完成选择和多选），我无法 *ngFor 它们（而且我不是当然我是否能够）编辑：忘记发布过滤器 HTML <div class="filterGroup"> <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter za param1" formControlName="filterParam1"> </mat-form-field> <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter za param2" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter za param3" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </div> 以及相关组件.ts tableDisplayedColumns: string[] = ['param1', 'param2', 'param3']; columns: any[] = [ { name: 'param1', title: 'Param1' }, { name: 'param2', title: 'Param2' }, { name: 'param3', title: 'Param3' } ]; 为了解决这个问题，我设法通过删除 *ngFor 并手动放入过滤器来做到这一点。 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container matColumnDef="param1"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param1 <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam1"> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param1}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param2"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param2 <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param2}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param3"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param3 <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param3}}</span> </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table>

ASP.NET MVC 项目模板在移动设备上无法调整为 100%

我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @模型IEnumerable 我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @model IEnumerable<iziConference.Models.EventAttendee> <h2>Participantes.</h2> <br /> <button><a style="text-decoration: none" href='@Url.Action("Create", new { eventId = ViewBag.EventId })'>Criar Participante</a></button> <button id="at-btn-refresh"> Actualizar</button> <input id="eventId" type="hidden" value="@ViewBag.EventId"> <table id="at-attendees-list" cellpadding="10" border="1" class="row-border stripe"> <thead> <tr> <th>ID</th> <th>Tipo</th> <th>Nome</th> <th>Email</th> <th>Estado </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr id="[email protected]_Id"> <td style="padding: 5px"> @Html.DisplayFor(modelItem => item.Attendee.Id) </td> <td> @Html.DisplayFor(modelItem => item.AttendeeType) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Name) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Email) </td> <td> @if (item.IsActive) { <button id="[email protected]_Id" class="at-btn-active-state active" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="false" data-show-confirmation-alert="true">Desactivar</button> } else { <button id="[email protected]_Id" class="at-btn-active-state inactive" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="true" data-show-confirmation-alert="true">Activar</button> } </td> </tr> } </tbody> </table> 由脚本加载： var _atteendeesList = "at-attendees-list"; $("#" + _atteendeesList).DataTable({ "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 使用默认的_Layout.cshtml： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>izigo Conference - Gestor de Conteúdos</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <section id="login"> @Html.Partial(MVC.Account.Views._LoginPartial) </section> <div style="padding: 10px;"> @if (Request.IsAuthenticated) { <nav> <ul id="menu"> <li>@Html.ActionLink("Home", MVC.Home.Index())</li> <li>@Html.ActionLink("Participantes", MVC.Attendee.Index())</li> <li>@Html.ActionLink("Check-in", MVC.Checkin.Index())</li> </ul> </nav> } </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer style="padding-left: 25px;"> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - <a href="https://www.izigo.pt/conference" target="_blank">izigo Conference</a> - <i>Powered by</i><a href="https://www.izigo.pt" target="_blank">izigo.pt</a></p> </div> </div> </footer> @Scripts.Render("~/bundles/jquery", "~/bundles/iziconference") @RenderSection("scripts", required: false) </body> </html> 研究了 dataTables 库的选项后，我找到了一个创建响应式解决方案的选项：我已经包含了响应表结构和columnDefs的选项，以选择哪些选项在移动设备中保持可见： $("#" + _atteendeesList).DataTable({ "responsive": true, "columnDefs": [ { responsivePriority: 1, targets: 0 }, { responsivePriority: 2, targets: -1 } ], "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 我还必须在捆绑包中包含数据表扩展的 js 和 css 响应式库（可在此处下载：https://datatables.net/download/）： bundles.Add(new ScriptBundle("~/bundles/iziconference").Include( "~/Content/Scripts/datatables.min.js", "~/Content/Scripts/dataTables.responsive.min.js")); // add-on bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/Styles/datatables.min.css", "~/Content/Styles/responsive.dataTables.min.css"));

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><script type="text/javascript"> $('#tabList button').click ( function (e) { e.preventDefault(); // bootstrap.Tab.getInstance(this).show() $(this).tab('show') } ); </script></code></pre> <pre><code><ul class="nav nav-tabs" id="tabList" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs" type="button" role="tab" aria-controls="jobs" aria-selected="true">[tabHeaderJobs]</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link active" id="employees-tab" data-bs-toggle="tab" data-bs-target="#employees" type="button" role="tab" aria-controls="employees" aria-selected="false">[tabHeaderEmployees]</button> </li> </ul> <div class="tabContent" id="tabContent"> <div class="tab-pane fade" id="jobs" role="tabpanel" aria-labelledby="jobs-tab">[tabContentJobs]</div> <div class="tab-pane fade active show" id="employees" role="tabpanel" aria-labelledby="employees-tab">[tabContentEmployees]</div> </div></code></pre> </div> </div> <p></p> <p>´´´</p> <p>主选择器是 tabList 还是 tabContent ？</p> <p>那么我是否需要从按钮中选择切换名称，然后使用 <pre><code>($('#tabContent a[href="#toggleNameOfTab"]').tab('show')</code></pre> ？</p> </question> <answer tick="false" vote="0"> <p>根据您更新的代码，有几件事：</p> <ol> <li>无需选择<pre><code>#tabContent a</code></pre>。您的选项卡按钮已经具有 <pre><code>.nav-link</code></pre> 类，因此您可以将单击处理程序直接附加到这些按钮：</li> </ol> <pre><code>$('.nav-link').click(function() { $(this).tab('show'); }); </code></pre> <ol start="2"> <li>要以编程方式激活页面加载时的特定选项卡，您可以执行以下操作：</li> </ol> <pre><code>$('#employees-tab').tab('show'); </code></pre> <p>这将在加载时激活#employees-tab。</p> <p>需要了解的关键事项：</p> <ul> <li>使用 <pre><code>.nav-link</code></pre> 将点击处理程序附加到选项卡按钮</li> <li>使用 <pre><code>$(selector).tab('show')</code></pre> 以编程方式切换选项卡，其中 <pre><code>selector</code></pre> 是选项卡按钮的 ID 或元素</li> </ul> </answer> </body></html>

特定标签的selenium xpath

此输入标签的 Xpath 是什么 ” 此输入标签的 Xpath 是什么 "<input autocapitalize="sentences" autocorrect="off" class="css-1cwyjr8 r-19sur4y r-qklmqi r-1phboty r-1wdu9aa r-ubezar r-16dba41 r-10paoce r-12rqra3 r-13qz1uu" dir="auto" spellcheck="false" type="email" data-focusable="true" value="" style="font-family: inherit;"> 如果只有 @type=email 的元素，则可以使用 //input[@type='email']

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 <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> 现在浏览器将每个选项的全部内容视为文本。这是 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 (/>/g,'>').replace (/</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>

我无法用vue.js显示json

我需要使用 v-for 显示 json 中的产品数组，但我无法这样做。我正在尝试显示产品数组中的 json 数据，但它不起作用。 Vue.js 我需要使用 v-for 显示 json 中的产品数组，但我无法这样做。我正在尝试显示产品数组中的 json 数据，但它不起作用。 Vue.js <div class="box" v-for="product in products" :key="product.id"> <h2>Produto {{ product.name }}</h2> <h3>Situação {{ product.situation }}</h3> </div> export default { data() { return { products: [], }; }, methods: { async getData() { try { const req = await fetch("http://localhost:3000/products"); const data = await req.json(); this.products = data.products; console.log("data" + data); } catch (error) { console.error("Error fetching data:", error); } }, mounted() { this.getData(); }, }, }; JSON： { "products": [ { "id": "a898", "name": "Claudio Romano", "situation": "Ativo" } ] } 您问错了问题，因为该问题与 JSON 无关。如果您对此进行调试，您会注意到 console.logs 不执行，这意味着问题更为根本，因为该方法本身并未实际运行。根本问题是mounted()不应该在methods内部。您正在使用 Vue 的选项 API，其中 data()、methods 和 mounted 都是独立的、单独的“选项”。您需要将安装移动到方法之外，它应该是一个“兄弟”选项。 export default { data() { ... }, methods: { ... }, mounted() { this.getData(); }, }; 游乐场演示

下拉按钮在 Bootstrap 5.3 上不起作用

我正在使用 Express、EJS 和 bootstrap 制作一个网站，但下拉按钮不起作用代码： <%- include('../includes/head') %> 我正在使用 Express、EJS 和 bootstrap 制作一个网站，但下拉按钮不起作用代码： <%- include('../includes/head') %> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> <%- include('../includes/footer') %> 头： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <title>Title</title> </head> <body> 页脚： <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html> 当我单击按钮时，它不显示下拉菜单的内容我不知道这是否重要/有效，但尝试将引导脚本从页脚移动到页眉，它可能基于加载顺序。

如何在不重新加载页面的情况下发送带有文件的表单？

我尝试在ajax中发送表单而不重新加载页面，但我看到，文件上的链接不存在...... 我有下一个表格：我尝试在ajax中发送表单而不重新加载页面，但我看到，文件上的链接不存在... 我有下一个表格： <form id="settings" method="POST" enctype="multipart/form-data"> ... <input type="file" id="logo" style="display:none;" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">save</button> </form> Ajax 脚本： $('#settings').submit(function(e){ e.preventDefault(); var form = $(this).serialize(); alert(form); // file is not attached... $.ajax({ url : '/settings', type : 'POST', crossDomain : false, data : form, contentType : 'multipart/form-data', dataType : 'json', progressData: false, cache : false, success : function(r){ alert (111); } }).fail(function(){ console.log('Error occured!'); }); }); 在服务器端，我收到错误： org.apache.tomcat.util.http.fileupload.FileUploadException：请求被拒绝，因为未找到多部分边界我尝试不序列化表单，而是写了 data : form -> data : new FormData(this) 此选项会导致错误“非法调用”。如何在不重新加载页面的情况下发送带有文件的表单？要使用 AJAX 发送带有文件的表单而不重新加载页面，您需要使用 FormData 来正确处理文件上传。 <form id="settings" method="POST" enctype="multipart/form-data">  <input type="file" id="logo" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">Save</button> </form> $(document).ready(function() { $('#settings').submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ url: '/settings', type: 'POST', data: formData, contentType: false, processData: false, cache: false, success: function(response){ alert('Form submitted successfully!'); // Handle the response from the server }, error: function(){ console.log('Error occurred!'); } }); }); });

如何防止我的CSS规则被reactjs/jsx中的规范化CSS覆盖？

我有一个非常简单的反应组件类 UpgradeContainer 扩展组件 { 使成为（） { 返回（我有一个非常简单的反应组件 class UpgradeContainer extends Component { render() { return ( <div className={styles.msg}> <div className={styles['msg-container']}> <h3 className={`${styles.title} highlight-color`}> Big Header </h3> <div className={`${styles.description} alternate-color`}> Small text <br /> Some more small text </div> </div> </div> ); } 这是相关的css .title { font-size: 40px; line-height: 50px; color: white; } .description { text-align: center; font-size: 16px; padding: 20px 0 10px; color: white; } 这是上面组件的 DOM 输出此处以文本形式转载： <div class="mRMOZryRtlFUx_NHlt1WD" data-reactid=".0.1.0.0.0.1"> <h3 class="_2s6iXRZlq-nQwIsDADWnwU highlight-color" data-reactid=".0.1.0.0.0.1.0"> Big Header</h3> <div class="_1pFak-xR0a8YH6UtvoeloF alternate-color" data-reactid=".0.1.0.0.0.1.1"> <span data-reactid=".0.1.0.0.0.1.1.0">Small text</span> <br data-reactid=".0.1.0.0.0.1.1.1"> <span data-reactid=".0.1.0.0.0.1.1.2">Some more small text</span></div></div> 如你所见，reactjs 添加了几个 <span/> 来包裹小文本我希望标题文本 (Big Header) 比描述文本（small text 和 some more small text）大得多。输出看起来像这样：这是因为reactjs出于某种原因添加了一个span来包裹文本small text和some more small text（data-reactid“.0.1.0.0.0.1.1.0”和“.0.1.0.0.0.1.1.2”分别）当我检查样式时，我发现这些 span 元素的样式被以下 css 规则覆盖我真的很困惑，因为这些规则不是我自己定义的。所以我点击 <style>...</style>，它会将我带到我想知道如何有效地覆盖这些CSS规则？我想要的最终结果是：如果您使用“Normalize.css”！此问题的解决方案是将主 css 文件“style.css”保留在底部。至少低于normalize.css。如果您使用 Bootstrap，直接来自 Bootstrap 官方网站，“为了改进跨浏览器渲染，我们使用 Normalize.css，这是 Nicolas Gallagher 和 Jonathan Neal 的一个项目。” 这个问题的解决方案是将主 css 文件“style.css”保留在底部。至少低于 bootstrap.css。我遇到了与您类似的问题，我的解决方案是在 app.tsx 文件顶部导入 Bootstrap 样式。这样做的原因是它可以防止 Bootstrap CSS 被应用程序中的其他样式覆盖，它对我有用

Vue.js 风格的 v-html 和范围内的 css

如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue 如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue <template> <div class="icon" v-html="icon"></icon> </template> <script> export default { data () { return {icon: '<svg>...</svg>'} } } </script> <style scoped> .icon svg { fill: red; } </style> 生成html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div> 生成CSS .info svg[data-v-9b8ff292] { fill: red; } 如您所见，v-html 内容没有 data-v 属性，但生成的 css 对于 svg 具有 data-v 属性。我知道这是 vue-loader 的预期行为（https://github.com/vuejs/vue-loader/issues/359）。在本期中提到了后代选择器。但正如你所看到的，我在我的 css 中使用了它，但它不起作用。如何设置 v-html 内容的样式？我正在使用vue-loader 15.9.1。 >>>解决方案对我不起作用（没有效果），而/deep/方法导致构建错误...... 这是有效的： .foo ::v-deep .bar { color: red; } 正如我在这里的回答所述：新版本的vue-loader（从版本12.2.0开始）允许您使用“深层范围”CSS。你需要这样使用它： <style scoped>现在支持可以影响子级的“深度”选择器使用 >>> 组合器的组件： .foo >>> .bar { color: red; } 将被编译为： .foo[data-v-xxxxxxx] .bar { color: red; } 更多信息请参见vue-loader的发布页面将 /deep/ 选择器与 SCSS 一起使用对我来说不起作用，但后来我尝试使用 ::v-deep 选择器例如 ::v-deep a { color: red; } 参见这个答案 AS Sarumanatee 说，如果接受的答案不起作用，请尝试： .foo /deep/ .bar { color: red; } 使用:deep {} 根据您的情况，您应该这样做： <template> <div class="icon" v-html="icon"></div> </template> <style scoped> .icon { :deep { svg { fill: red; } } } </style>

从数据库中选择 SELECT 选项后如何显示/隐藏 DIV？

这是选择选项的代码；这是选择选项的代码； <div class="modal-body row"> <form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data"> <div class="form-group col-md-6"> <label for="exampleInputEmail1"><?php echo lang('categorie'); ?></label> <select class="form-control m-bot15" name="categorie" value='' id="p_category"> <option value="#"> Sélectionner catégorie</option> <?php foreach ($categories as $category) { ?> <option value="category"><?php if (!empty($setval)) { if ($category->category == set_value('category')) { echo 'selected'; } } if (!empty($patient->category)) { if ($category->category == $patient->category) { echo 'selected'; } } ?> > <?php echo $category->category; ?> </option> <?php } ?> </select> </div> 这是必须显示/隐藏的 div： <label for="exampleInputEmail1"><?php echo lang('name_Us'); ?></label> <input type="text" class="form-control" name="name_husband" id="nameUs" placeholder=""> <label for="exampleInputEmail1"><?php echo lang('number_pre'); ?></label> <input type="number" class="form-control" name="number_pre" id="nbreEnf" placeholder=""> </div> 这是 JavaScript 代码： $('.divUs').hide(); $(document.body).on('change', '#p_category', function () { var v = $("select.p_category option:selected").val() if (v == 'Fe_Ence') { $('.divUs').show(); } else { $('.divUs').hide(); } }); }); 我希望如果选择了元素（Fe_Ence），则可以显示 div，否则，它保持隐藏例如，您可以使用 :has 选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="thingtohide"> <h1>Hello</h1> </div> <div id="checkbox"> <input type="checkbox"> </div> <style> body:has(#checkbox input:checked) #thingtohide { visibility: hidden; } </style> </body> </html> 因此，如果父元素有一个选中的复选框，那么您可以定位与该父元素不同的子元素。

将 twig 转换为 tpl

我尝试将twig转换为tpl，以便能够在2,3,0中使用3,0,0付款扩展。树枝线我尝试将 twig 转换为 tpl 以便能够在 2,3,0 中使用 3,0,0 付款扩展。树枝线 <select name="payment_special_mode" class="form-control"> <option value="1" {{ payment_special_mode? 'selected' : '' }}>{{ text_enabled }}</option> <option value="0" {{ payment_special_mode? '' : 'selected' }}>{{ text_disabled }}</option> </select> <select name="payment_special_mode" class="form-control"> <option value="1" {{ payment_special_mode? 'selected' : '' }}>{{ text_enabled }}</option> <option value="0" {{ payment_special_mode? '' : 'selected' }}>{{ text_disabled }}</option> </select> 前往tpl线路 <select name="payment_special_mode" class="form-control"> <?php if ($payment_special_mode) { ?> <option value="1" selected="selected"><?php echo $text_enabled; ?> </option> <option value="0"><?php echo $text_disabled; ?></option> <?php } else { ?> <option value="1"><?php echo $text_enabled; ?></option> <option value="0" selected="selected"><?php echo $text_disabled; ?></option> <?php } ?> </select> 这是正确的吗是的，我做到了，但没有成功，仍然在管理扩展行中可见，但有文本。用了opencartbot转换器，转换了大部分，但是有4行没有。检查了所有文件和文件夹。读了很多标题，问了很多论坛，我找不到办法。如果我能以正确的方式将 twig 转换为 tpl，则在 3,0,2 扩展中必须有效。我还将 user_token 更改为 token，$data['token'] = $this->session->data['token']

Angular tabView primeNG 路由

我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气这是 HTML 我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气这是html <p-tabView> <p-tabPanel header="Weather Data" routerLink="/weather-data"> <app-weather-data></app-weather-data> </p-tabPanel> <p-tabPanel header="Chart"> <app-chart></app-chart> </p-tabPanel> <p-tabPanel header="Heat index calculator" closable="true"> <app-heat-index></app-heat-index> </p-tabPanel> </p-tabView> 这是 module.ts import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: 'weather-data', component: WeatherDataComponent }, { path: 'chart', component: ChartComponent }, { path: 'heat-index', component: HeatIndexComponent }, ]; @NgModule({ declarations: [ AppComponent, WeatherDataComponent, ChartComponent, HeatIndexComponent, ], imports: [ BrowserModule, TabViewModule, ButtonModule, ChartModule, TableModule, HttpClientModule, InputNumberModule, FormsModule, SelectButtonModule, DropdownModule, BrowserAnimationsModule, FontAwesomeModule, InputSwitchModule, PaginatorModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes), ], providers: [DatePipe], bootstrap: [AppComponent], }) export class AppModule {} 我找不到有关 tabView 组件的任何有关如何实现路由的文档，感谢任何帮助我按以下方式使用了 TabMenu 组件。 <p-tabMenu [model]="items"> </p-tabMenu> <router-outlet></router-outlet> MenuItem 类型有一个命令属性，在命令上您可以实现自定义操作，在您的情况下可以是路由。 this.items = [ { label: "Map", icon: "pi pi-fw pi-map", command: () => { this.router.navigate(["./map"]) }, }, ];

QWebEngineView：html 文件中的 href 不起作用

我有一个 test.html 文件，例如：我有一个 test.html 文件，例如： <!DOCTYPE html> <html> <head> </head> <body> <a style="padding-right:5px" target="_blank" href="data/">Datadir</a> </body> </html> 包含 test.html 的目录如下： test.html data\ a.txt b.txt 我使用“file:///remote/us01home19/ktc/public_html/testLocalHref/test.html”并在firefox和chrome中单击Datadir，结果如下：和：我写了一个pyside2代码来做同样的事情，代码如下： from PySide2 import QtCore, QtWidgets, QtWebEngineWidgets import os import sys class CustomWebEnginePage(QtWebEngineWidgets.QWebEnginePage): # Store second window. external_window = None def acceptNavigationRequest(self, url, _type, isMainFrame): print(url, _type, isMainFrame) if _type == QtWebEngineWidgets.QWebEnginePage.NavigationTypeLinkClicked: if not self.external_window: self.external_window = QtWebEngineWidgets.QWebEngineView() self.external_window.setUrl(url) self.external_window.show() return False return super().acceptNavigationRequest(url, _type, isMainFrame) class MainWindow(QtWidgets.QMainWindow): def __init__(self, *args, **kwargs): super(MainWindow, self).__init__(*args, **kwargs) self.browser = QtWebEngineWidgets.QWebEngineView() self.browser.setPage(CustomWebEnginePage(self)) # self.browser.setUrl(QtCore.QUrl("https://code.visualstudio.com")) self.browser.setUrl(QtCore.QUrl("file:///remote/us01home19/ktc/public_html/testLocalHref/test.html")) # self.browser.setUrl(QtCore.QUrl("file:///remote/tw_rnd1/ktc/prog/python/pyside2/WebEngine/data/aaa.ava.summary.html")) #self.browser.setUrl(QtCore.QUrl("file:///remote/tw_rnd1/ktc/prog/python/pyside2/WebEngine/data/aaa_ava_corners/C_1")) self.setCentralWidget(self.browser) if __name__ == '__main__': app = QtWidgets.QApplication(sys.argv) window = MainWindow() window.show() sys.exit(app.exec_()) 但是执行代码，我得到的结果如下：但是点击Datadir，没有任何反应，甚至QWebEnginePage.acceptNavigationRequest也没有触发。有没有办法让 QWebEngine 的行为像 Firefox 和 Chrome 一样？我尝试在 QWebEnginePage.acceptNavigationRequest 函数中添加打印消息来捕获点击 dataDir 信息，但似乎没有任何响应。 python版本：python-3.9.0，操作系统版本：“CentOS Linux 7”， Qt 版本：“Qt_5.15” python 和 Qt 是自定义构建我发现问题来自htmltarget =“_blank”在QWebEnginePage中不起作用，它可以通过在QtWebEngineWidgets中实现类函数createWindow来避免，例如： class CustomWebEnginePage(QtWebEngineWidgets.QWebEnginePage): # Store second window. external_window = None def acceptNavigationRequest(self, url, _type, isMainFrame): print(url, _type, isMainFrame) if _type == QtWebEngineWidgets.QWebEnginePage.NavigationTypeLinkClicked: if not self.external_window: self.external_window = QtWebEngineWidgets.QWebEngineView() self.external_window.setUrl(url) self.external_window.show() return False return super().acceptNavigationRequest(url, _type, isMainFrame) def createWindow(self, t): return self;enter code here

ML.net - CreateTimeSeriesEngine

我正在使用 ML.net 进行时间序列分析项目。在这里我尝试预测欧元兑美元的交易汇率。我从 CSV 文件加载数据并使用内存数据创建 IDataView。列表我正在使用 ML.net 进行时间序列分析项目。在这里我尝试预测欧元兑美元的交易汇率。我从 CSV 文件加载数据并使用内存数据创建 IDataView。 List<RateData> infoList = new List<RateData>(); // populate list infoList = FileParser(infoList); IDataView data = mlContext.Data.LoadFromEnumerable<RateData>(infoList); 我设法像这样运行预测估计器 var forecastEstimator = mlContext.Forecasting.ForecastBySsa( outputColumnName: nameof(RatePrediction.CurrentRate), inputColumnName: nameof(RateData.HistoricalRate), windowSize: 14, seriesLength: numRateDataPoints, trainSize: numRateDataPoints, horizon: 1, confidenceLevel: 0.95f ); SsaForecastingTransformer forecaster = forecastEstimator.Fit(RateDataSeries); 然后我尝试创建这样的预测引擎 var ForecastEngine = Forecaster.CreateTimeSeriesEngine(mlContext); 这里我遇到了一些错误。我的输入和输出类如下： public class RateData { public DateTime TransactionDate { get; set; } public float HistoricalRate { get; set; } } public class RatePrediction { public float CurrentRate; } 我有这样的错误 System.InvalidOperationException: Can't bind the IDataView column 'CurrentRate' of type 'Vector<Single, 1>' to field or property 'CurrentRate' of type 'System.Single'. at Microsoft.ML.Data.TypedCursorable`1..ctor(IHostEnvironment env, IDataView data, Boolean ignoreMissingColumns, InternalSchemaDefinition schemaDefn) at Microsoft.ML.Data.TypedCursorable`1.Create(IHostEnvironment env, IDataView data, Boolean ignoreMissingColumns, SchemaDefinition schemaDefinition) at Microsoft.ML.Transforms.TimeSeries.TimeSeriesPredictionEngine`2.PredictionEngineCore(IHostEnvironment env, InputRow`1 inputRow, IRowToRowMapper mapper, Boolean ignoreMissingColumns, SchemaDefinition outputSchemaDefinition, Action& disposer, IRowReadableAs`1& outputRow) at Microsoft.ML.PredictionEngineBase`2..ctor(IHostEnvironment env, ITransformer transformer, Boolean ignoreMissingColumns, SchemaDefinition inputSchemaDefinition, SchemaDefinition outputSchemaDefinition, Boolean ownsTransformer) at Microsoft.ML.Transforms.TimeSeries.TimeSeriesPredictionEngine`2..ctor(IHostEnvironment env, ITransformer transformer, Boolean ignoreMissingColumns, SchemaDefinition inputSchemaDefinition, SchemaDefinition outputSchemaDefinition) at Microsoft.ML.Transforms.TimeSeries.PredictionFunctionExtensions.CreateTimeSeriesEngine[TSrc,TDst](ITransformer transformer, IHostEnvironment env, Boolean ignoreMissingColumns, SchemaDefinition inputSchemaDefinition, SchemaDefinition outputSchemaDefinition) at USD_EURO_Conversion_rate.TimeSeriesModelHelper.FitAndSaveModel(MLContext mlContext, IDataView RateDataSeries, String outputModelPath) 预测类中的属性需要是float[]类型；向量/数组而不是单个值，例如 public class RatePrediction { public float[] CurrentRate; } 类似于此处的Microsoft 示例。

android中customView中如何收集Viewmodel StateFlow

android中customView中如何采集StateFlow 我有一个视图模型类 MyViewModel : ViewModel() { 私有 val _myState = MutableStateFlow(MyState()) val myState：StateFlow android中customView中如何采集StateFlow 我有一个视图模型 class MyViewModel : ViewModel() { private val _myState = MutableStateFlow(MyState()) val myState: StateFlow<MyState> = _myState fun updateMyState(newState: MyState) { _myState.value = newState } } data class MyState( val name: String = "", val age: Int = 0, val isMarried: Boolean = false ) 我能够使用收集活动中的更新数据 lifecycleScope.launchWhenStarted { viewModel.myState.collect { state -> Log.e("collected ", "tateflow: ${state.name}") } } 我们如何根据收集的数据更新自定义视图？我们如何根据这些数据更新自定义视图您能分享一下在自定义视图中创建 viewModel 的代码吗？你的代码是不是类似这样： private val viewModel: ActivityViewModel by activityViewModels()

Flatpickr AlpineJS 在危险范围选择上坚持插件

我有一个工作完美的 Flatpickr 日期范围日历，它将日期存储在会话存储中。这是我的代码：我有一个工作完美的 Flatpickr 日期范围日历，它将日期存储在会话存储中。这是我的代码： <div x-data="{ chosenDates: sessionStorage.getItem('_x_range'), value: [], init() { let picker = flatpickr(this.$refs.picker, { mode: 'range', inline: false, dateFormat: 'm/d/Y', showMonths: 2, }) this.$watch('value', () => picker.setDate(this.value)) }, }" > <div class="flex items-center flex-1 gap-2 overflow-hidden border border-gray-500 rounded-lg"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="ml-4 bi bi-calendar-event-fill" viewBox="0 0 16 16"> <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-3.5-7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5"/> </svg> <input id="rangeValue" :value="chosenDates" placeholder="Add dates" x-ref="picker" type="text" class="p-0 py-4 placeholder-gray-600 border-0 bg-none focus:ring-0 " data-input> </div> </div> 设置项目： function dateRange() { var date = document.getElementById("rangeValue").value; sessionStorage.setItem("_x_range", date); sessionStorage.setItem("start", start); sessionStorage.setItem("end", end); const start = sessionStorage.getItem("start"); } $('#rangeValue').on('focus', ({ currentTarget }) => $(currentTarget).blur()) $("#rangeValue").prop('readonly', false) ``` Receive item: if (sessionStorage.getItem("_x_range") != null) { document.getElementById("chosenRange").innerHTML = sessionStorage.getItem("_x_range"); document.getElementById("rangeValue").value = sessionStorage.getItem("_x_range"); } ``` 如果可能的话，我想学习如何使用 AplineJS 和 Persist 来设置它，以免代码过多而过期。这可能吗？这是一个可能的解决方案： <div x-data="{ thePicker: null, chosenDates: $persist([]).using(sessionStorage).as('_x_range'), init() { this.thePicker = flatpickr(this.$refs.picker, { mode: 'range', inline: false, dateFormat: 'm/d/Y', showMonths: 2, defaultDate: this.chosenDates, onChange: (selectedDates) => {this.chosenDates = [...selectedDates];} }); }, }" > <div class="flex items-center flex-1 gap-2 overflow-hidden border border-gray-500 rounded-lg"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="ml-4 bi bi-calendar-event-fill" viewBox="0 0 16 16"> <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-3.5-7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5"/> </svg> <input type="text" x-ref="picker" placeholder="Add dates" class="p-0 py-4 placeholder-gray-600 border-0 bg-none focus:ring-0" > <span title="Clear" class="text-blue-600 cursor-pointer" @click="thePicker.clear()" > X </span> </div> <div x-text="chosenDates"> </div> </div> 日期范围存储在 Alpine chosenDates 变量中，该变量通过 Persist 进行持久化并初始化为空数组。当日期选择器初始化时，chosenDates变量用于填充defaultDate参数。选择日期范围后，flatpicker 会触发 onChage 事件，因此我使用它将新范围复制到 chosenDates 变量中。我添加了一个 “clear” 按钮以 flatpicker 方式重置输入字段，调用 clear() 方法（这是一个简单的示例），然后我必须将 flatpicker 引用存储在 thePicker 中变量. 我还添加了一个通过 x-text 显示 choosenDates 的内容

如果类型是从变量进行数据绑定，则通过 <object> 标签在 Angular 中显示 pdf 无法在 Chrome 中工作

我正在尝试通过标签在 Chrome 中显示 pdf。如果我手动编写类型，它会起作用：不工作但是... 我正在尝试通过 <object> 标签在 Chrome 中显示 pdf。如果我手动写 type: 就可以了 <object [data]="getUrl(true)" type="application/pdf"> Not working </object> 但如果我从变量读取类型则不会： <object [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> 为什么？这是一些非常奇怪的错误，还是我做错了什么可怕的事情。这里是plunkr。它可以在 Firefox 中运行（所有 4 个对象都会显示），但不能在 Chrome 中运行 (Version 74.0.3729.169 (Official Build) (64-bit))：我遇到了同样的问题，但我不明白原因。就我而言，我决定在基于 Blink 引擎的浏览器中使用“embed”元素而不是“object”元素。 <ng-template #blinkPlatformViewer> <embed [src]="getUrl(true)" [type]="file.mimeType"/> </ng-template> <object *ngIf="!isBlinkPlatform; else blinkPlatformViewer" [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> import { Platform } from '@angular/cdk/platform'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; export class FileContentComponent { constructor(private readonly sanitizer: DomSanitizer, private readonly platform: Platform) { } get isBlinkPlatform(): boolean { return this.platform.BLINK; } }

如何以 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><style> body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} </style> <h1>Hello World</h1> <my-element> <div slot="header"><strong>Header</strong></div> <div slot="body">Body</div> </my-element> <script> customElements.define('my-element', class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .container { border: solid 1px blue; padding: 5px; position: relative; &:after { content: "my-element"; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part="body"] ::slotted(div) { background-color: lightyellow; } </style> <div class="container"> <header part="header"><slot name="header"></slot></header> <hr> <div part="body"><slot name="body"></slot></div> </div> `; } }); </script></code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色，标有 <pre><code>part="header"</code></pre> 的元素从外部设置为绿色，插入 <pre><code>slot="body"</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 | <style> 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. <div class="private-parent"> <slot /> </div> <style> div.private-parent { color: blue; } </style> </code></pre> <p>然后，您使用该组件：</p> <pre><code><script> import Test from './Test.svelte'; </script> <Test>  <p class="outside-style">Hello!</p> </Test> <style> p.outside-style { color: darkred; } </style> </code></pre> </answer> </body></html>

如果父级 <a> 具有特定类，如何使用 JavaScript 将 <span> 标签的文本用 <div> 括起来

我有以下代码我有以下代码 <div class="team-grid"> <div class="cssgrid-wrapper"> <div class="cssgrid-container"> <div class="tmb"> <div class="t-inside "> <div class="t-entry-text"> <div class="t-entry-text-tc"> <div class="t-entry"> <p class="t-entry-meta"> <span class="t-entry-category t-entry-tax"> <a href="#">Category one</a> </span> </p> </div> </div> </div> </div> </div> </div> <div class="tmb"> <div class="t-inside "> <div class="t-entry-text"> <div class="t-entry-text-tc"> <div class="t-entry"> <p class="t-entry-meta"> <span class="t-entry-category t-entry-tax"> <a href="#">Category two</a> </span> </p> </div> </div> </div> </div> </div> </div> </div> 并且我想使用javascript将每个A标签的文本包含在具有“hide”类的SPAN中，如果a标签具有具有“team-grid”类的祖父母DIV和具有“t-entry”类的父SPAN -类别'。所以在上面的例子中结果将是 <div class="team-grid"> <div class="cssgrid-wrapper"> <div class="cssgrid-container"> <div class="tmb"> <div class="t-inside "> <div class="t-entry-text"> <div class="t-entry-text-tc"> <div class="t-entry"> <p class="t-entry-meta"> <span class="t-entry-category t-entry-tax"> <a href="#"><span class="hide">Category one</span></a> </span> </p> </div> </div> </div> </div> </div> </div> <div class="tmb"> <div class="t-inside "> <div class="t-entry-text"> <div class="t-entry-text-tc"> <div class="t-entry"> <p class="t-entry-meta"> <span class="t-entry-category t-entry-tax"> <a href="#"><span class="hide">Category two</span></a> </span> </p> </div> </div> </div> </div> </div> </div> </div> 如有任何帮助，我们将不胜感激。 document.querySelectorAll('.team-grid .t-entry-category > a').forEach(a => { a.innerHTML = `<span class="hide">${a.textContent}</span>`; });

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', ]; }

完整日历：使用 IF 语句为事件着色

我有一个基于站点管理员打开的票证的日历。我们有四种类型的门票：待办的进行中完成的取消这是我有日历的 div：我有一个基于站点管理员打开的票证的日历。我们有四种类型的门票：待定进行中完成了取消这是我有日历的div： <div class="col-lg-6 col-md-10 col-sm-11"> <div class="card"> <div class="card-header" data-background-color="blue"> <h4 class="title">Calendario</h4> </div> <br> <section class="content"> <?php $events = TicketData::getEvents(); foreach($events as $event){ $thejson[] = array("title"=>$event->title,"url"=>"./?view=editticket&id=".$event->id,"start"=>$event->date_at."T".$event->time_at); } // print_r(json_encode($thejson)); ?> <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?> }); }); </script> <div class="row"> <div class="col-md-12"> <div id="calendar"> </div> </div> </div> </section> </div> </div> 门票的数据库结构很简单：id、title、description、date_at、time_at、created_at、tecnico_id和status_id。我想使用 if 脚本“着色”事件：这是我的代码，但它不起作用。 <section class="content"> <?php $events = TicketData::getEvents(); // $status->status_id; foreach($events as $event){ $thejson[] = array("title"=>$event->title,"url"=>"./?view=editticket&id=".$event->id,"start"=>$event->date_at."T".$event->time_at,); $thejsonColor[] = array($event->status_id); } // print_r(json_encode($thejson)); ?> <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?>, if ($thejsonColor=1){ eventColor: 'fb8c00' }else if ($thejsonColor=2){ eventColor: 'ff0' } else if ($thejsonColor=3){ eventColor: '43a047' } else { eventColor: '00acc1' } }); }); </script> 我想让它们符合颜色标准，这样用户就可以知道哪些票是待处理的、不完整的、完整的和已取消的。我是 javascript 的新手，我不知道如何做到这一点。你们能帮助我或指出我应该如何做吗？您可以在迭代事件数组时设置颜色： <?php // helper function to pick the right color function getColor($id) { $eventColor = ''; if ($id == 1) { $eventColor = '#fb8c00'; } else if ($id == 2) { $eventColor = '#ff0'; } else if ($id == 3) { $eventColor = '#43a047'; } else { $eventColor = '#00acc1'; } return $eventColor; } $events = TicketData::getEvents(); //pulls the events from TicketData.php foreach($events as $event) { $thejson[] = array( "title" => $event->title, "url" => "./?view=editticket&id=".$event->id, "start" => $event->date_at."T".$event->time_at, "color" => getColor($event->status_id)); } ?> 然后就像你现在正在做的那样回显事件： <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?>, }); }); </script> 或者您可以通过从 php 中的表中选择来完成此操作，例如： $sql = "SELECT CASE WHEN tickets='Pending'" THEN '#C6E0B4' WHEN tickets='In progres' THEN '#FFFF99' END AS color" $schedules = $conn->query($sql); $sched_res = []; foreach($schedules->fetch_all(MYSQLI_ASSOC) as $row){ $sched_res[$row['id']] = $row; } 然后就像你现在正在做的那样回显事件： <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?>, }); }); </script>

Kendo MVC UI Scheduler 自定义编辑器模板验证

我试图在自定义编辑器模板中删除此组合框的验证： ... @{ ViewContext.FormContext = new FormContext(); } 我试图在自定义编辑器模板中删除此组合框的验证： ... @{ ViewContext.FormContext = new FormContext(); } <div data-container-for="ClientId" class="k-edit-field"> @(Html.Kendo().ComboBoxFor(model => model.ClientId) .HtmlAttributes(new { data_bind = "value:ClientId", id = "ClientId", data_val = false }) .Name("ClientId") .DataTextField("Text") .DataValueField("Value") .DataSource(source => { source.Read(read => { read.Action("GetClientsList", "Scheduler"); }).ServerFiltering(true); }) .Events(e => { e.Select("onSelect"); }) .HtmlAttributes(new { style = "width:100%;" })) </div> @{ ViewContext.FormContext = null; } ... 尝试使用以下方法删除模型中的验证： [AllowAnyValue] public int? ClientId { get; set; } public class AllowAnyValueAttribute : ValidationAttribute { public override bool IsValid(object value) { // Always return true to allow any value return true; } } 尝试在组合框输入中添加新文本，例如名称，我仍然收到此 Kendo 错误留言： `The field ClientId must be a number.` 我对验证 Kendo 控件不太熟悉，但在我看来，您正在为具有“Text”和“Value”字段的实体指定组合框，而您绑定的实体是一个名为“ClientId”的简单可为空 int . 添加一个 CbBoxValue 类，如下所示： public class CbBoxValue { [AllowAnyValue] public int? Value { get; set; } public string Text { get; set; } public CbBoxValue ( int? ClientId ) { Value = ClientId; Text = ClientId?.ToString() ?? ""; } } 然后将 CbBoxValue(ClientId) 传递给组合框，而不是直接传递 ClientId。注意：我还没有测试过这个，正如我所说，我对此事不是很熟悉，但这对我来说似乎是合乎逻辑的。

卡片标题中的居中文本

使用 bulma 可以轻松定位文本 - 通常。我无法将卡头属性居中。我的尝试：通常使用 bulma 可以轻松定位文本。我无法将 card-header 属性居中。我的尝试： <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <div class="columns mt-3"> <div class="column is-3 ml-3" style="display: flex;"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="has-text-right is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div>  </div> <div class="card-content"> <div class="media">  <div class="media-content"> <p class="title is-3" style="display: flex;"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> 为什么我的has-text-centered没有应用在card-header而是其他地方？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bulma Card Header Centered</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <style> .card-header { justify-content: center; } </style> </head> <body> <div class="columns mt-3"> <div class="column is-3 ml-3"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div> </div> <div class="card-content"> <div class="media"> <div class="media-content"> <p class="title is-3"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> </div> </body> </html>

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

谷歌已取代 <question vote="1"> <p>谷歌已取代 <br/></p> <p><pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</script></code></pre> <br/></p> <p>与<br/></p> <p><pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"</script></code></pre> <br/></p> <p><strong>参考</strong>：<a href="https://support.google.com/adsense/answer/10627874" rel="nofollow noreferrer">Google Adsense 公告</a><br/></p> <p><strong>旧的 Adsense 代码就像：</strong></p> <pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:350px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </code></pre> <p><strong>新的 Adsense 代码如下：</strong></p> <pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:350px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </code></pre> <p><strong>页面加载完成后加载广告的旧 JS 代码是：</strong></p> <pre><code> <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </code></pre> <p>由于在新广告代码的脚本标签中添加了<pre><code>?client=ca-pub-xxxxxx" crossorigin="anonymous"</code></pre>，那么现在加载广告的新JS代码是什么？</p> </question> <answer tick="true" vote="1"> <p>嗯，这并不是真正的延迟加载，这是延迟加载，不推荐，但你就可以了</p> <pre><code><script> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"; element.async = true; element.setAttribute('crossorigin', 'anonymous'); document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </code></pre> <p>如果您正在寻找延迟加载 AdSense，请查看 <a href="https://www.guest.blog/post/12068/lazy-loading-adsense-ads/" rel="nofollow noreferrer">延迟加载 Adsense</a></p> </answer> <answer tick="false" vote="0"> <blockquote> <h2>引用的标题##<script async</h2> <p>src="https://pagead2.googlesyndicate.com/pagead/js/adsbygoogle.js?client=ca-pub-1049121221402917" 跨桥=“匿名”></p> </blockquote> </answer> </body></html>

单击 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希望这个解决方案可以帮助你:)

如何使用LocalDate从spring查询elasticsearch

有这个搜索查询：最终 SearchQuery searchQuery = new NativeSearchQueryBuilder().withQuery(QueryBuilders.rangeQuery("updateTime").gte(LocalDate.now())).build(); 最终名单有此搜索查询： final SearchQuery searchQuery = new NativeSearchQueryBuilder().withQuery(QueryBuilders.rangeQuery("updateTime").gte(LocalDate.now())).build(); final List<ActivityValue> listOf = elasticsearchTemplate.queryForList(searchQuery, ActivityValue.class); 使用实体 ActivityValue： @Document(indexName = "tracking1", type = "activity") public class ActivityValue { @Id private String id; @Field(type = FieldType.Date, index = false, store = true, format = DateFormat.custom, pattern = "yyyy-MM-dd") @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd") private LocalDate updateTime; @Field(type = FieldType.Object, includeInParent = true) private Vendor vendor; @Field(type = FieldType.Object, includeInParent = true) private QCriteria quality; public ActivityValue() { } //setter and getter } 如果我运行查询并尝试接收列表，我会收到以下异常： caused by: java.io.IOException: can not write type [class java.time.LocalDate] 实体之前存储的实际日期为LocalDate。我不确定查询 Elasticsearch 并解决此错误的最佳/最简单方法是什么。有人可以帮忙吗？ final SearchQuery searchQuery = new NativeSearchQueryBuilder().withQuery(QueryBuilders.rangeQuery("updateTime").gte(LocalDate.now().toString())).build(); final List<ActivityValue> listOf = elasticsearchTemplate.queryForList(searchQuery, ActivityValue.class); 我通过使用 LocalDate.now().toString() 而不是 LocalDate.now() 解决了这个问题而是使用自定义模式（您还必须在任何 @Field 上设置），您可以从 objectmapper 禁用默认行为。默认行为是将 LocalDate 转换为时间戳。 //For LocalDateTime usage final ObjectMapper objectMapper = new ObjectMapper().registerModule(new JavaTimeModule()); objectMapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false); final JacksonJsonpMapper jsonpMapper = new JacksonJsonpMapper(objectMapper); 这样做，您可以确保自动以 yyyy-MM-ddThh:mm:ss.SSSZ 格式存储，而不是在 epoc 时间后的几毫秒内存储。现在您可以将数据设置为： static class Data { private LocalDateTime dateTime; } 并使用类似于以下的查询进行搜索： RangeQuery rangeQuery = new RangeQuery.Builder().field("dateTime").lt(JsonData.of(LocalDateTime.now())).build(); 没有问题或任何额外的努力。

如何将 '<p class="p1">' 、 '<div class="disp-quote-p">/following-sibling::*[1][self::p[@class='p1']]' 包装/分组在单个 'p' 元素中

我正在包装节点 ' 、 '' 和 div[@class='disp-quote-p']/following-sibling::*[1][self::p[@class=' p1']] 里面... 我正在尝试将节点 <p class="p1">' , '<div class="disp-quote-p">' and div[@class='disp-quote-p']/following-sibling::*[1][self::p[@class='p1']] 包裹在单个 p 元素中。输入 XML：- <root> <p class="p">aa</p> <p class="p1">Although:</p> <div class="disp-quote-p"> <p class="p">We had seen.</p> </div> <p class="p1">This dot.</p> <img src="a.png"/> <box>box</box> <p class="p">bb</p> </root> 我正在尝试将节点包装在单个 p 元素中的代码，但此节点 <p class="p1">This dot.</p> 与 <div class="disp-quote-p"> 节点一起包装。 <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="root"> <xsl:copy> <xsl:for-each-group select="*" group-starting-with="p[@class='p1']"> <xsl:for-each-group select="current-group()" group-adjacent="self::p[@class='p1'] or self::div[@class='disp-quote-p']"> <xsl:choose> <xsl:when test="self::p[@class='p1']"> <p><xsl:apply-templates select="node(), current-group() except ."/></p> </xsl:when> <xsl:otherwise> <xsl:copy-of select="current-group()"/> </xsl:otherwise> </xsl:choose> </xsl:for-each-group> </xsl:for-each-group> </xsl:copy> </xsl:template> 网址链接：[http://xsltransform.net/eiov64R/1] 预期输出：- <root> <p class="p">aa</p> <p>Although:<disp-quote><p class="p">We had seen.</p></disp-quote>This dot.</p> <img src="a.png"/> <box>box</box> <p class="p">bb</p> </root> 试试这个： <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="root"> <xsl:copy> <xsl:for-each-group select="*" group-adjacent="if(self::p[@class='p1'] or self::div) then -1 else position()"> <xsl:choose> <xsl:when test="self::p[@class='p1'] or self::div"> <p><xsl:apply-templates select="current-group()"/></p> </xsl:when> <xsl:otherwise> <xsl:copy-of select="current-group()"/> </xsl:otherwise> </xsl:choose> </xsl:for-each-group> </xsl:copy> </xsl:template> <xsl:template match="p[@class='p1']"> <xsl:apply-templates/> </xsl:template> <xsl:template match="div[@class='disp-quote-p']"> <xsl:element name="disp-quote"> <xsl:apply-templates/> </xsl:element> </xsl:template>

显示输入类型日期的占位符文本

占位符不适用于直接输入类型日期和日期时间本地。占位符不适用于直接输入类型 date 和 datetime-local。 <input type="date" placeholder="Date" /> <input type="datetime-local" placeholder="Date" /> 该字段在桌面上显示 mm/dd/yyy，而在移动设备上则不显示任何内容。如何显示 Date 占位符文本？使用onfocus="(this.type='date')"，例如： <input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/> 使用onfocus和onblur...这是一个例子： <input type="text" placeholder="Birth Date" onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}"> 在这里，我尝试了 data 元素中的 input 属性。并使用 CSS 应用所需的占位符 <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> input[type="date"]::before { content: attr(data-placeholder); width: 100%; } /* hide our custom/fake placeholder text when in focus to show the default * 'mm/dd/yyyy' value and when valid to show the users' date of birth value. */ input[type="date"]:focus::before, input[type="date"]:valid::before { display: none } <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> 希望这有帮助 <input type="text" placeholder="*To Date" onfocus="(this.type='date')" onblur="(this.type='text')" > 这段代码对我有用。只需使用这个即可对于 Angular 2，你可以使用这个指令 import {Directive, ElementRef, HostListener} from '@angular/core'; @Directive({ selector: '[appDateClick]' }) export class DateClickDirective { @HostListener('focus') onMouseFocus() { this.el.nativeElement.type = 'date'; setTimeout(()=>{this.el.nativeElement.click()},2); } @HostListener('blur') onMouseBlur() { if(this.el.nativeElement.value == ""){ this.el.nativeElement.type = 'text'; } } constructor(private el:ElementRef) { } } 并像下面一样使用它。 <input appDateClick name="targetDate" placeholder="buton name" type="text"> 对于 React，你可以这样做。 const onDateFocus = (e) => (e.target.type = "datetime-local"); const onDateBlur = (e) => (e.target.type = "text"); . . . <input onFocus={onDateFocus} onBlur={onDateBlur} type="text" placeholder="Event Date" /> 我是这样做的： var dateInputs = document.querySelectorAll('input[type="date"]'); dateInputs.forEach(function(input) { input.addEventListener('change', function() { input.classList.add('no-placeholder') }); }); input[type="date"] { position: relative; } input[type="date"]:not(.has-value):before { position: absolute; left: 10px; top: 30%; color: gray; background: var(--primary-light); content: attr(placeholder); } .no-placeholder:before{ content:''!important; } <input type="date" name="my-date" id="my-date" placeholder="My Date"> 现代浏览器使用 Shadow DOM 来方便输入日期和日期时间。因此，除非浏览器出于某种原因选择回退到 text 输入，否则不会显示占位符文本。您可以使用以下逻辑来适应这两种情况： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 我使用了 Tailwind CSS 语法，因为它很容易理解。让我们一点一点地分解它： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } 使用其 Shadow DOM 伪元素选择器隐藏本机选择器图标（通常是日历）。 input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } 选择所有未显示占位符的 date 和 datetime-local 输入，并且：默认使用 placeholder 伪元素显示输入 ::before 文本在小屏幕及以上屏幕上切换为使用 ::after 伪元素 input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 设置 ::before 和 ::after 伪元素的样式。

如何解决错误“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...

PHPUnit 和 Laravel 响应 401 状态代码，它应该返回 422

我正在学习 Laravel 11，我在使用 PHPStorm 时遇到了第一个问题（我不知道这是否是我的测试）。我有这个控制器：我正在学习 Laravel 11，我在使用 PHPStorm 时遇到了第一个问题（我不知道这是否是我的测试）。我有这个控制器： <?php namespace App\Http\Controllers; use App\Http\Controllers\Controller; use Illuminate\Http\Request; class LoginController extends Controller { public function login(Request $request) { $request->validate([ 'email' => 'email|string', 'password' => 'required|min:8', ]); $credentials = request(['email', 'password']); if (!$token = auth()->attempt($credentials)) { return jsonResponse(status: 401, message: 'Unauthorized'); } return jsonResponse(data: [ 'token' => $token, 'expires_in' => auth()->factory()->getTTL() * 60 ]); } } 我的测试代码： public function test_email_must_be_required(): void { $credentials = ['password' => 'password']; $response = $this->postJson("{$this->apiBase}/login", $credentials); $response->assertStatus(422); $response->assertJsonStructure(['message', 'data', 'status', 'errors' => ['email']]); $response->assertJsonFragment(['errors' => ['email' => ['The email field is required.']]]); } 但是当我运行测试时，我得到以下响应：但是，它不应返回 401，因为测试凭据中的电子邮件未发送。它应该返回响应代码 422。 [编辑] 当我更改验证方法时： ... 'email' => 'required|email|string', ... 我的代码响应是 200: [编辑2] 这是我的routes/api.php代码： 'email' => 'email|string', 此规则检查电子邮件是否是有效的电子邮件格式并且是字符串。但是，该字段未标记为必填字段。因此，如果请求中未提供电子邮件，验证不会失败，并且请求将继续进行下一步（auth()->attempt()），最终由于缺少凭据而返回 401 未经授权的响应。

Vue 3如何获取$children的信息

这是我在 Tabs 组件中使用 VUE 2 的旧代码：创建（）{ this.tabs = this.$children; } 标签： .... 这是我在 Tabs 组件中使用 VUE 2 的旧代码： created() { this.tabs = this.$children; } 标签： <Tabs> <Tab title="tab title"> .... </Tab> <Tab title="tab title"> .... </Tab> </Tabs> VUE 3：如何使用组合 API 获取有关 Tabs 组件中子项的一些信息？获取长度，迭代它们，并创建选项卡标题，...等？有任何想法吗？（使用组合API）这是我现在的 Vue 3 组件。我使用 Provide 来获取子 Tab 组件中的信息。 <template> <div class="tabs"> <div class="tabs-header"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{'tab-selected': index === selectedIndex}" class="tab" > {{ tab.props.title }} </div> </div> <slot></slot> </div> </template> <script lang="ts"> import {defineComponent, reactive, provide, onMounted, onBeforeMount, toRefs, VNode} from "vue"; interface TabProps { title: string; } export default defineComponent({ name: "Tabs", setup(_, {slots}) { const state = reactive({ selectedIndex: 0, tabs: [] as VNode<TabProps>[], count: 0 }); provide("TabsProvider", state); const selectTab = (i: number) => { state.selectedIndex = i; }; onBeforeMount(() => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab"); } }); onMounted(() => { selectTab(0); }); return {...toRefs(state), selectTab}; } }); </script> 选项卡组件： <script lang="ts"> export default defineComponent({ name: "Tab", setup() { const index = ref(0); const isActive = ref(false); const tabs = inject("TabsProvider"); watch( () => tabs.selectedIndex, () => { isActive.value = index.value === tabs.selectedIndex; } ); onBeforeMount(() => { index.value = tabs.count; tabs.count++; isActive.value = index.value === tabs.selectedIndex; }); return {index, isActive}; } }); </script> <template> <div class="tab" v-show="isActive"> <slot></slot> </div> </template> 哦伙计们，我解决了： this.$slots.default().filter(child => child.type.name === 'Tab') 对于想要完整代码的人：标签.vue <template> <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> </template> <script> export default { name: "Tabs", data() { return {tabs: [] }; }, created() { }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }); } } } </script> <style scoped> </style> 标签.vue <template> <div v-show="isActive"><slot></slot></div> </template> <script> export default { name: "Tab", props: { name: { required: true }, selected: { default: false} }, data() { return { isActive: false }; }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, mounted() { this.isActive = this.selected; }, created() { this.$parent.tabs.push(this); }, } </script> <style scoped> </style> 应用程序.js <template> <Tabs> <Tab :selected="true" :name="'a'"> aa </Tab> <Tab :name="'b'"> bb </Tab> <Tab :name="'c'"> cc </Tab> </Tabs> <template/> 我扫描子元素的解决方案（在对 vue 代码进行大量筛选之后）是这样的。 export function findChildren(parent, matcher) { const found = []; const root = parent.$.subTree; walk(root, child => { if (!matcher || matcher.test(child.$options.name)) { found.push(child); } }); return found; } function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 这将返回子组件。我对此的用途是我有一些通用的对话框处理代码，用于搜索子表单元素组件以咨询其有效性状态。 const found = findChildren(this, /^(OSelect|OInput|OInputitems)$/); const invalid = found.filter(input => !input.checkHtml5Validity()); 如果你复制粘贴与我相同的代码然后只需向“选项卡”组件添加一个创建的方法，该方法将自身添加到其父级的选项卡数组中 created() { this.$parent.tabs.push(this); }, 使用脚本设置语法，您可以使用useSlots：https://vuejs.org/api/sfc-script-setup.html#useslots-useattrs <script setup> import { useSlots, ref, computed } from 'vue'; const props = defineProps({ perPage: { type: Number, required: true, }, }); const slots = useSlots(); const amountToShow = ref(props.perPage); const totalChildrenCount = computed(() => slots.default()[0].children.length); const childrenToShow = computed(() => slots.default()[0].children.slice(0, amountToShow.value)); </script> <template> <component :is="child" v-for="(child, index) in childrenToShow" :key="`show-more-${child.key}-${index}`" ></component> </template> 我对 Ingrid Oberbüchler 的组件做了一个小改进，因为它不支持热重载/动态选项卡。在 Tab.vue 中： onBeforeMount(() => { // ... }) onBeforeUnmount(() => { tabs.count-- }) 在 Tabs.vue 中： const selectTab = // ... // ... watch( () => state.count, () => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab") } } ) 我也遇到了同样的问题，在做了很多研究并问自己为什么他们删除了$children之后，我发现他们创建了一个更好、更优雅的替代方案。这是关于动态组件的。 (<component: is =" currentTabComponent "> </component>). 我在这里找到的信息： https://v3.vuejs.org/guide/component-basics.html#dynamic-components 希望这对你有用，向大家问好！！我发现这个更新的 Vue3 教程使用 Vue 插槽构建可重用的选项卡组件对于与我相关的解释非常有帮助。它使用 ref、provide 和ject 来替换我遇到同样问题的this.tabs = this.$children;。我一直在遵循我最初发现的构建选项卡组件（Vue2）的教程的早期版本创建您自己的可重用 Vue 选项卡组件。根据 Vue 文档，假设您在 Tabs 组件下有一个默认插槽，您可以直接在模板中访问该插槽的子级，如下所示： // Tabs component <template> <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container"> <button v-for="(tab, index) in getTabs($slots.default()[0].children)" :key="index" :class="{ active: modelValue === index }" @click="$emit('update:model-value', index)" > <span> {{ tab.props.title }} </span> </button> </div> <slot></slot> </template> <script setup> defineProps({ modelValue: Number }) defineEmits(['update:model-value']) const getTabs = tabs => { if (Array.isArray(tabs)) { return tabs.filter(tab => tab.type.name === 'Tab') } else { return [] } </script> <style> ... </style> 并且 Tab 组件可能类似于： // Tab component <template> <div v-show="active"> <slot></slot> </div> </template> <script> export default { name: 'Tab' } </script> <script setup> defineProps({ active: Boolean, title: String }) </script> 实现应类似于以下内容（考虑一组对象，每个部分一个，带有 title 和 component）： ... <tabs v-model="active"> <tab v-for="(section, index) in sections" :key="index" :title="section.title" :active="index === active" > <component :is="section.component" ></component> </app-tab> </app-tabs> ... <script setup> import { ref } from 'vue' const active = ref(0) </script> 另一种方法是使用 useSlots，如 Vue 文档（上面的链接）中所述。在 3.x 中，$children 属性已被删除并且不再受支持。相反，如果您需要访问子组件实例，他们建议使用 $refs。作为数组 https://v3-migration.vuejs.org/writing-changes/children.html#_2-x-syntax 在 3.x 版本中，$children 已被删除且不再受支持。使用 ref 访问子实例。 <script setup> import { ref, onMounted } from 'vue' import ChildComponent from './ChildComponent .vue' const child = ref(null) onMounted(() => { console.log(child.value) // log an instance of <Child /> }) </script> <template> <ChildComponent ref="child" /> </template> 详细信息：https://vuejs.org/guide/essentials/template-refs.html#template-refs 基于@Urkle的回答： /** * walks a node down * @param vnode * @param cb */ export function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 除了已接受的答案之外：而不是 this.$root.$children.forEach(component => {}) 写 walk(this.$root, component => {}) 这就是我让它为我工作的方式。

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

数据<- 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=

检测具有委托的元素内部的单击以及何时通过其类名称选择该元素

如何检测单击是否位于其侦听器被类选择的元素内部？例如，我有一些类名为“my-class”的元素：如何检测单击是否位于其侦听器被类选择的元素内部？例如，我有一些类名为“my-class”的元素： <div class="my-class"> <button>Hello</button> <p>World</p> </div> <div class="my-class"> <a href="">Click</a> <a href="">Here</a> </div> 如果我只听课，点击内部元素是不行的： document.addEventListener("click", function(event) { if(event.target.classList.contains("my-class") { // } }); 我怎样才能检测到对其中任何元素的点击？我发现了以下问题，但它仅适用于由 id 选择且没有委托的单个元素： Detect click inside/outside of element with single event handler 使用Element::closest()检查被点击的元素是在my-class内部还是my-class本身： https://developer.mozilla.org/en-US/docs/Web/API/Element/closest document.addEventListener("click", function(event) { if(event.target.closest(".my-class")) { console.log('my-class clicked!'); } event.preventDefault(); }); <div class="my-class"> <button>Hello</button> <p>World</p> </div> <div class="my-class"> <a href="">Click</a> <a href="">Here</a> </div>

循环一组xpath并检查测试值jmeter webdriver

我有大约 100 个 xpath，它们仅在最后的索引上有所不同示例 xpath 范围为 (//div[@class='something']//div[@class='some other thing'])[1] 到 (//div[@class='something']//...

data-class 相关问题

最新问题