Question

出于逃避我的原因，我没有隐藏并在点击按钮后显示div。

当我在段落之外有我的按钮时 - 它有效，所以我想我不知道找不到以下div。我曾尝试过.find（＆＃34; .divNotes＆＃34;）。接下来，但这也不起作用。

所以我希望我错过了一些简单的语法/逻辑

.article { width: 200px; }
.btnNotes { }
.divNotes { display : none; }

<div class="article">
    <p>Text text Art 1  ... <button type="button" class="btnNotes" >Notes</button></p>
    <div class="divNotes">
        <p>Text text More 1</p>
        <p>Text text</p>
    </div>
</div>

<div class="article">
    <p>Text text Art 2  ... <button type="button" class="btnNotes" >Notes</button></p>

    <div class="divNotes">
        <p>Text text More 2</p>
        <p>Text text</p>
    </div>
</div>

<div class="article">
    <p>Text text Art 3  ...  <button type="button" class="btnNotes" >Notes</button></p>

    <div class="divNotes">
        <p>Text text More 3</p>
        <p>Text text</p>
    </div>
</div>

$(document).ready(function() {
    $('.btnNotes').click(function(){
        if ($(this).text() === "Notes") {
            alert("Notes= " + $(this).text() + $(this).nextAll("div.divNotes").text());

            $(this).text("Less");
            $(this).nextAll("div.divNotes").toggle();          
        } else {
            alert ("Less= " + $(this).text() + $(this).nextAll("div.divNotes").text());

            $(this).text("Notes");
            $(this).nextAll("div.divNotes").toggle();
        }        
    }); 
});

Answer 1

nextAll()遍历旁边的兄弟姐妹。但是在p代码中，按钮是唯一的兄弟，它无法找到divNotes因此您需要使用.parent()来实际使用.nextAll()

  $(this).parent().nextAll("div.divNotes").toggle();

Answer 2

问题是因为button不是.divNotes的兄弟，因此nextAll()或next()找不到任何内容。您可以使用closest()来获取父.article和usnig find()来获取所需的div，如下所示：

$('.btnNotes').click(function() {
    $(this).text($(this).text() === "Notes" ? 'Less' : "Notes")
        .closest('.article').find('.divNotes').toggle();
});

Working example

请注意使用三元表达式来简化扩展if语句的逻辑。

Answer 3

我的工作是将.parent（）添加到你的行$（this）.parent（）。nextAll（“。divNotes”）。toggle（）;

$(document).ready(function() {
    $('.btnNotes').click(function(){
        if ($(this).text() === "Notes") {
            alert("Notes= " + $(this).text() + $(this).nextAll(".divNotes").text());

            $(this).text("Less");
            $(this).parent().nextAll(".divNotes").toggle();          
        } else {
            alert ("Less= " + $(this).text() + $(this).nextAll("div.divNotes").text());

            $(this).text("Notes");
            $(this).parent().nextAll(".divNotes").toggle();
        }

    }); 
});

Answer 4

点击按钮获取父div.article，然后将其切换为相应的div.divNotes。

以下是一个工作示例：

$(document).ready(function() {
  $('.btnNotes').click(function() {
    if ($(this).text() === "Notes") {
      $(this).text("Less");
    } else {
      $(this).text("Notes");
    }
    $(this).parents("div.article").find("div.divNotes").toggle();
  });
});

.article {
  width: 200px;
}
.btnNotes {} .divNotes {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="article">
  <p>Text text Art 1 ...
    <button type="button" class="btnNotes">Notes</button>
  </p>
  <div class="divNotes">
    <p>Text text More 1</p>
    <p>Text text</p>
  </div>
</div>

<div class="article">
  <p>Text text Art 2 ...
    <button type="button" class="btnNotes">Notes</button>
  </p>

  <div class="divNotes">
    <p>Text text More 2</p>
    <p>Text text</p>
  </div>
</div>

<div class="article">
  <p>Text text Art 3 ...
    <button type="button" class="btnNotes">Notes</button>
  </p>

  <div class="divNotes">
    <p>Text text More 3</p>
    <p>Text text</p>
  </div>
</div>

Answer 5

如果您想查找下一个具有特定课程的所有div，并且您想要切换该课程，请尝试按照代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
.article { width: 200px; }
.btnNotes { }
.divNotes { display : none; }
</style>

<div class="main-div">
    <div class="article">
        <p>Text text Art 1  ... <button type="button" class="btnNotes" >Notes</button></p>
        <div class="divNotes">
            <p>Text text More 1</p>
            <p>Text text</p>
        </div>
    </div>

    <div class="article">
        <p>Text text Art 2  ... <button type="button" class="btnNotes" >Notes</button></p>

        <div class="divNotes">
            <p>Text text More 2</p>
            <p>Text text</p>
        </div>
    </div>

    <div class="article">
        <p>Text text Art 3  ...  <button type="button" class="btnNotes" >Notes</button></p>

        <div class="divNotes">
            <p>Text text More 3</p>
            <p>Text text</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.btnNotes').click(function(){
            if ($(this).text() === "Notes") {
                $(this).text("Less");               
            } else {                
                $(this).text("Notes");              
            }
            $(this).parent().parent('div.main-div').find('div.divNotes').toggle();
        }); 
    });
</script>

找到下一个课程

5 个答案: