removeAttr上的jQuery选择器错误

Question

我试图从某个类中删除所有id，然后将id放在有类但不起作用的链接上click上的新元素上。

添加新的id似乎起作用，但在添加此新的id之前删除所有id不起作用。

这是我的代码：

$(".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。

也许我认为click函数不适用于这个选择器之外的类的选择器。

应该在我的博客上应用的代码：

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

任何建议都将不胜感激。

Answer 1

我想你可能把问题搞混了——你的代码删除了id的内容，但它没有添加它们。这是您的代码的JSFiddle——我为每个表单添加了一个id，这样您就可以看到发生了什么。单击链接将删除id的罚款，但添加id不起作用。

添加不起作用，仅仅是因为你的遍历方向不对。您在匹配的.responsediv上使用.closest()，但它通过DOM向上搜索其祖先。您正在搜索的.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，来识别"；活动的"；form。

旁注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')...

Answer 2

我已经将您的点击函数编辑到可以找到表单并添加所需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
});