我嘗試id從某個類中洗掉所有 s，然后在具有類但不起作用的鏈接id上放置一個新元素。click
新的添加id似乎有效，但id在添加新的之前洗掉所有 sid不起作用。
這是我的代碼：
$(".response").click(function () {
// $('.responsediv').find("input[type=text], textarea").val("");
$('.blogcommentresponse-form').removeAttr('id')
$(".responsediv").fadeOut();
$(this).parents("div").next(".responsediv").css("visibility", "").fadeIn(100);
$(this).parents("div").next(".responsediv").closest(".blogcommentresponse-form").attr('id','blogcommentresponse-form');
});
它適用于添加id到新的表單元素，但不適用于洗掉id所有其他表單。
也許我認為單擊功能不適用于此選擇器之外的類的選擇器。
它應該在我的博客上應用的代碼：
<div class="comments">
<div class="u-heading-v3-1 g-mb-5">
<h2 class="h3 u-heading-v3__title g-brd-primary no-padding-b">
Commentaires sur cet article
</h2>
</div>
<div class="media g-mb-20"> <img loading="lazy" class="d-flex g-width-60 g-height-60 rounded-circle g-mt-3 g-mr-20" src="assets/img/team/face-6.png" alt="">
<div class="media-body u-shadow-v22 g-bg-secondary g-rounded-5 g-pa-10">
<div class="d-flex align-items-start g-mb-15 g-mb-10--sm">
<div class="d-block">
<h5 class="h6 g-color-black g-font-weight-600">Gérard Ricard</h5> <span class="d-block g-color-gray-dark-v5 g-font-size-11">15 janvier 2022 à 00:05</span>
</div>
<div class="ml-auto"> <a class="u-link-v5 g-color-black g-color-blue--hover g-font-weight-600 g-font-size-12 text-uppercase response" style="cursor:pointer">Répondre</a> </div>
</div>
<p>Bonjour, que préconisez-vous pour le renforcement de vieux murs en bauges ?
Par avance merci </p>
<ul class="list-inline my-0 pull-right">
<li class="list-inline-item rating">
Note :
<i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i>
</li>
</ul>
</div>
</div>
<div class="responsediv row" style="display:none">
<div class="col-md-2 text-left"></div>
<div class="respondform col-md-9">
<div class="u-heading-v3-1 g-mb-5">
<h3 class="h3 u-heading-v3__title g-brd-primary no-padding-b">
Publier une réponse au commentaire de Gérard Ricard
</h3>
</div>
<form action="plugins/skyforms/blog-comment-response-process.php" method="post" class="blogcommentresponse-form sky-form comment-style" novalidate="novalidate"> <input type="hidden" name="id_article" value="103"> <input type="hidden" name="face_id" value="4"> <input type="hidden" name="id_comment" value="119">
<fieldset>
<div class="row">
<div class="bon_blog_commentresponse_box form-group col-lg-6 g-mb-10"> <input type="hidden" name="blogcommentresponse"> <label class="g-mb-10" for="bon_blog_commentresponse_name">Votre nom :</label> <input class="form-control g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" placeholder="Nom ou Pseudo" type="text" name="nom_blog_commentresponse" required=""> </div>
<div class="bon_blog_commentresponse_box form-group col-lg-6 g-mb-10"> <label class="g-mb-10" for="bon_blog_commentresponse_email">Votre e-mail :</label> <input class="form-control g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" placeholder="Adresse e-mail" type="email" name="email_blog_commentresponse" required=""> </div>
</div>
<div class="form-group g-mb-20"> <label class="g-mb-5" for="commentaire_blog_commentresponse">Votre commentaire :</label> <textarea class="countit form-control rounded-0 form-control-md w-100 faq-form g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" name="commentaire_blog_commentresponse" rows="5" placeholder="Tapez votre commentaire ici" minlength="30" maxlength="500" required=""></textarea>
Caractères restant : <span class="counter_desc">500 caractères</span> </div>
<p><button type="submit" class="btn w-100 u-btn-primary text-center"><i class="fa fa-send"></i> Envoyer votre commentaire</button></p>
</fieldset>
</form>
<div class="row">
<div class="bon-blogcommentresponse-success g-mb-20"></div>
<div class="message-blogcommentresponse message alert alert-dismissible fade show g-bg-teal g-color-white rounded-0 w-100" role="alert"> <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
<div class="media"> <span class="d-flex g-mr-10 g-mt-5"> <i class="icon-check g-font-size-25"></i> </span> <span class="media-body align-self-center"> <strong>Terminé !</strong> Votre réponse a bien été envoyée. Elle est en attente de modération.
</span> </div>
</div>
<div class="error-blogcommentresponse message error alert alert-dismissible fade show g-bg-yellow rounded-0 w-100" role="alert"> <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
<div class="media"> <span class="d-flex g-mr-10 g-mt-5"> <i class="icon-info g-font-size-25"></i> </span> <span class="media-body align-self-center"> <strong>Attention !</strong> A cause d'une erreur technique, le commentaire n'a pas pu être envoyé. Veuillez recommencer plus tard.
</span> </div>
</div>
</div>
</div>
<div class="col-md-1 text-left"><br> <span style="cursor:pointer ;color:#000000 !important" class="annulereponse">X</span> </div>
</div>
<div class="media g-brd-gray-light-v4 g-ml-40 g-mb-30"> <img loading="lazy" class="d-flex g-width-60 g-height-60 rounded-circle g-mt-3 g-mr-15" src="assets/img/team/face-99.png" alt="">
<div class="media-body u-shadow-v22 g-bg-secondary g-rounded-5 g-pa-10">
<div class="d-flex align-items-start g-mb-15 g-mb-10--sm">
<div class="d-block">
<h5 class="h6 g-color-black g-font-weight-600">Stan Piotrowski</h5> <span class="d-block g-color-gray-dark-v5 g-font-size-11">16 janvier 2022 à 21:27</span>
</div>
</div>
<p>Bonjour,
l'idéal est d'utiliser des croix de cha?nages reliées avec des tirants. Toutefois vous pouvez aussi réaliser un cha?nage traditionnel avec une structure armée. Veillez a bien utiliser un mortier de scellement à retrait compensé afin de s'adapter aux propriétés de dilatation de la terre.</p>
</div>
</div>
<div class="media g-mb-20"> <img loading="lazy" class="d-flex g-width-60 g-height-60 rounded-circle g-mt-3 g-mr-20" src="assets/img/team/face-5.png" alt="">
<div class="media-body u-shadow-v22 g-bg-secondary g-rounded-5 g-pa-10">
<div class="d-flex align-items-start g-mb-15 g-mb-10--sm">
<div class="d-block">
<h5 class="h6 g-color-black g-font-weight-600">Smith</h5> <span class="d-block g-color-gray-dark-v5 g-font-size-11">14 janvier 2022 à 08:02</span>
</div>
<div class="ml-auto"> <a class="u-link-v5 g-color-black g-color-blue--hover g-font-weight-600 g-font-size-12 text-uppercase response" style="cursor:pointer">Répondre</a> </div>
</div>
<p>Bonjour,
dans quelle mesure est-il possible de faire un traitement étanchéité sur des murs semi-enterrés ?
</p>
<ul class="list-inline my-0 pull-right">
<li class="list-inline-item rating">
Note :
<i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i>
</li>
</ul>
</div>
</div>
<div class="responsediv row" style="display:none">
<div class="col-md-2 text-left"></div>
<div class="respondform col-md-9">
<div class="u-heading-v3-1 g-mb-5">
<h3 class="h3 u-heading-v3__title g-brd-primary no-padding-b">
Publier une réponse au commentaire de Smith
</h3>
</div>
<form action="plugins/skyforms/blog-comment-response-process.php" method="post" class="blogcommentresponse-form sky-form comment-style" novalidate="novalidate"> <input type="hidden" name="id_article" value="103"> <input type="hidden" name="face_id" value="4"> <input type="hidden" name="id_comment" value="117">
<fieldset>
<div class="row">
<div class="bon_blog_commentresponse_box form-group col-lg-6 g-mb-10"> <input type="hidden" name="blogcommentresponse"> <label class="g-mb-10" for="bon_blog_commentresponse_name">Votre nom :</label> <input class="form-control g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" placeholder="Nom ou Pseudo" type="text" name="nom_blog_commentresponse" required=""> </div>
<div class="bon_blog_commentresponse_box form-group col-lg-6 g-mb-10"> <label class="g-mb-10" for="bon_blog_commentresponse_email">Votre e-mail :</label> <input class="form-control g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" placeholder="Adresse e-mail" type="email" name="email_blog_commentresponse" required=""> </div>
</div>
<div class="form-group g-mb-20"> <label class="g-mb-5" for="commentaire_blog_commentresponse">Votre commentaire :</label> <textarea class="countit form-control rounded-0 form-control-md w-100 faq-form g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" name="commentaire_blog_commentresponse" rows="5" placeholder="Tapez votre commentaire ici" minlength="30" maxlength="500" required=""></textarea>
Caractères restant : <span class="counter_desc">500 caractères</span> </div>
<p><button type="submit" class="btn w-100 u-btn-primary text-center"><i class="fa fa-send"></i> Envoyer votre commentaire</button></p>
</fieldset>
</form>
<div class="row">
<div class="bon-blogcommentresponse-success g-mb-20"></div>
<div class="message-blogcommentresponse message alert alert-dismissible fade show g-bg-teal g-color-white rounded-0 w-100" role="alert"> <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
<div class="media"> <span class="d-flex g-mr-10 g-mt-5"> <i class="icon-check g-font-size-25"></i> </span> <span class="media-body align-self-center"> <strong>Terminé !</strong> Votre réponse a bien été envoyée. Elle est en attente de modération.
</span> </div>
</div>
<div class="error-blogcommentresponse message error alert alert-dismissible fade show g-bg-yellow rounded-0 w-100" role="alert"> <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
<div class="media"> <span class="d-flex g-mr-10 g-mt-5"> <i class="icon-info g-font-size-25"></i> </span> <span class="media-body align-self-center"> <strong>Attention !</strong> A cause d'une erreur technique, le commentaire n'a pas pu être envoyé. Veuillez recommencer plus tard.
</span> </div>
</div>
</div>
</div>
<div class="col-md-1 text-left"><br> <span style="cursor:pointer ;color:#000000 !important" class="annulereponse">X</span> </div>
</div>
<div class="media g-brd-gray-light-v4 g-ml-40 g-mb-30"> <img loading="lazy" class="d-flex g-width-60 g-height-60 rounded-circle g-mt-3 g-mr-15" src="assets/img/team/face-99.png" alt="">
<div class="media-body u-shadow-v22 g-bg-secondary g-rounded-5 g-pa-10">
<div class="d-flex align-items-start g-mb-15 g-mb-10--sm">
<div class="d-block">
<h5 class="h6 g-color-black g-font-weight-600">Stan Piotrowski</h5> <span class="d-block g-color-gray-dark-v5 g-font-size-11">14 janvier 2022 à 17:00</span>
</div>
</div>
<p>Bonjour, il existe toutes sortes de procédés pour le traitement des parties enterrées : cuvelage, drainage, revêtement bitumineux. Tout dépend de la configuration de votre maison ainsi que du type d'infiltrations que vous avez.
Bien cordialement, l'équipe SP-BATIMENT</p>
</div>
</div>
</div>
任何形式的建議將不勝感激。
uj5u.com熱心網友回復：
我想你可能有點混淆了你的問題 - 你的代碼洗掉了ids 罰款，但它沒有添加它們。 這是您的代碼的 JSFiddle - 我id在每個表單中都添加了一個，這樣您就可以看到會發生什么。單擊鏈接會洗掉ids 罰款，但添加 anid不起作用。
添加不起作用僅僅是因為您在錯誤的方向上移動。您正在使用.closest()match ，但它會通過 DOM.responsediv搜索其祖先。您正在搜索的 是 的孩子，因此您需要向下搜索它的后代。你可以用..blogcommentresponse-form.responsediv.find()
作業片段：
$(".response").click(function () {
$('.blogcommentresponse-form').removeAttr('id')
$(".responsediv").fadeOut();
$(this).parents("div").next(".responsediv").css("visibility", "").fadeIn(100);
// Changed .closest() to .find() here
$(this).parents("div").next(".responsediv")
.find(".blogcommentresponse-form")
.attr('id','blogcommentresponse-form');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comments">
<div class="media">
<div class="media-body">
<div>
<div class="ml-auto">
<!-- LINK 1 ################################################### -->
<a class="response">Répondre</a>
</div>
</div>
<p>Bonjour, que préconisez-vous pour le renforcement de vieux murs en bauges ? Par avance merci </p>
</div>
</div>
<div class="responsediv" style="display:none">
<div class="respondform">
<!-- FORM 1 ################################################### -->
<!-- Give form an ID so we can check if it is removed/updated -->
<form class="blogcommentresponse-form" id="form-1">Form 1</form>
</div>
</div>
<div class="media"></div>
<div class="media">
<div class="media-body">
<div>
<div class="ml-auto">
<!-- LINK 2 ################################################### -->
<a class="response">Répondre 2</a>
</div>
</div>
<p>Bonjour, dans quelle mesure est-il possible de faire un traitement étanchéité sur des murs semi-enterrés ?</p>
</div>
</div>
<div class="responsediv" style="display:none">
<div class="respondform">
<!-- FORM 2 ################################################### -->
<!-- Give form an ID so we can check if it is removed/updated -->
<form class="blogcommentresponse-form" id="form-2">Form 2</form>
</div>
</div>
<div class="media"></div>
</div>旁注1 ：發布問題時，請嘗試制作一個最小、完整且可驗證的示例。我花在這個問題上的 90% 時間只是試圖深入了解 HTML 的基本結構。您添加的代碼中混雜著 CSS 類和不相關的 HTML，它掩蓋了我們和您的內容！- 真的需要看到并專注于對問題的感覺。我添加的片段是我將其歸結為的；從這樣的事情開始，問題幾乎立即顯而易見。
旁注 2：正如評論中已經指出的那樣，動態 ID 在語意上似乎是錯誤的方法。ID 應該是唯一的、特定的元素，而不是改變的東西。我建議也許使用一個類，例如.active，來識別“活動”形式。
旁注 3：我不確定您對 HTML 有多少控制權，也許它是由插件自動生成的，但這要困難得多，而且 IMO 更脆弱且容易損壞，因為語意相關的元素組沒有分組在父母的陪伴下。如果每個鏈接和表單都嵌套在父元素中，這將更容易，并且如果元素在將來的某些更新中更改或移動，則不太可能中斷。例如：
<div class="comment">
<div class="media">
<a class="response"></a>
</div>
<div class="responsediv">
<form class="blogcommentresponse-form"></form>
</div>
</div>
現在查找表單的代碼很簡單：
$('.response').on('click', function() {
// Find the form
$(this).closest('.comment').find('.blogcommentresponse-form')...
uj5u.com熱心網友回復：
我已將您的點擊功能編輯為可以找到表單并添加您想要的 id 的版本。我評論的行無法找到表單，因此我在您的代碼的下一行添加了新行。它使你想做什么。
$(".response").click(function () {
$('.blogcommentresponse-form').removeAttr('id')
$(".responsediv").fadeOut();
$(this).parents("div").next(".responsediv").css("visibility", "").fadeIn(100);
// $(this).parents("div").next(".responsediv").closest(".blogcommentresponse-form").attr('id','blogcommentresponse-formid'); //this code can't find the form
$(this).closest('.media').next(".responsediv").find(".blogcommentresponse-form").attr('id','blogcommentresponse-formid');// Right way to add id atribute
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419461.html
標籤：