Question

我正在尝试使用jQuery来显示或不显示div，但是我无法通过jQuery代码选择它。它返回我undefined。有人可以帮我吗？

$(document).on('click', '.questions', function() {
  $(this).replaceWith($('<p id="selected">' + this.innerHTML + '</p>'));
  $(this).parent().next().css("border", "1px solid red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions_impt">
  <p id="testde" class="questions">Comment vous rejoindre ?</p>
  <div class="quest_join">
    <p>Pour nous rejoindre il faut que tu t'inscrives a l'association. Remplis le formulaire ci-joint et renvois le nous a l'adresse XXX. Tu recevras ensuite un mail t'annonçant ton arrivé l'association. Tu peux aussi venir a nos journées d'initiation tout
      le long de l'année si tu veux d'abord découvrir le longboard avant de t'engager !</p>
  </div>
</div>

Answer 1

您在$(this).parent().next()点击事件上使用.questions。

问题：

$(this) =具有.questions类的DIV
其父parent() = <div id="questions_impt">
它是next()，您在结束<div id="questions_impt">标记后还没有发布任何代码。

主要问题：

您正在使用replaceWith()并直接在自己的点击事件中进入$(this)
它将从DOM中删除.questions，因此此后将不起作用。

解决方案：


更改行的顺序，如下所示

第一行：$(this).parent().next().css("border", "1px solid red");

第二行：$(this).replaceWith($('<p id="selected">' + this.innerHTML + '</p>'));

检查以下代码：

$(document).on('click','.questions',function(){
   $(this).parent().next().css("border","1px solid red");
   $(this).replaceWith($('<p id="selected">' + this.innerHTML + '</p>'));
});

.questions{
cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions_impt">
    <p id="testde" class="questions">Comment vous rejoindre ?</p>
    <div class="quest_join">
        <p>Pour nous rejoindre il faut que tu t'inscrives a l'association.
            Remplis le formulaire ci-joint et renvois le nous a l'adresse XXX. Tu recevras ensuite un mail t'annonçant ton arrivé
            l'association. Tu peux aussi venir a nos journées d'initiation tout le long de l'année si tu veux d'abord découvrir le
            longboard avant de t'engager !</p>
    </div>
</div>
<div>
	i'm here.
</div>

Answer 2

因为您正在尝试访问父级的下一个元素您可以按ID

来访问元素

 $(document).on('click', '.questions', function() {
   $(this).replaceWith($('<p id="selected">' + this.innerHTML + '</p>'));  
   $("#selected").next().css("border", "1px solid red");
 });

Answer 3

-从您的代码中，我了解到的是，当您单击具有“问题”类的元素时。您要显示带有红色边框的div。

如果您只想执行一次此交互，然后删除父级，请参见下面的代码

$(document).on('click', '.questions', function() {
  $(this).replaceWith($('<p id="selected">' + this.innerHTML + '</p>'));
  $(this).next().css("border", "1px solid red");
});

此代码将起作用，但再次为什么您要尝试使用问题类替换元素。如果要显示它已被选中，则只需将class添加到该元素。
好吧，如果您只想执行一次此交互，那很好，但是请确保您不要添加其他元素，并且给出相同的ID“ selected”。

让我知道是否需要澄清。

欢呼

$（this）.next（）返回未定义

3 个答案: