Question

如果我添加一个额外的元素，为什么jQuery脚本不起作用？

该脚本适用于25个块。还有一个，脚本不再起作用了。

请查看下面的脚本并添加一个新块。

$('.halfblock').each(function(index, element){
      $('.openlink').on('click', function(event) {
          event.preventDefault();
          var text = $(this).text();
          $(this).parent().parent().parent().toggleClass('opened');
          $(this).text(text == "schließen" ? "Weitere Infos" : "schließen");
      });
    });

.halfblock .fulltext{
  display: none;
  font-size: 14px !important;
  margin-top: 20px;
  color: #222222 !important;
}

.halfblock.opened .fulltext{
  display: block;
}

.openfull{
  background: #111;
  color: #fff;
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="halfblock">
<div class="text">
    <h3>1</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>2</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>3</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>4</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>5</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>6</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>7</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>8</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>9</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>10</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>11</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>12</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>13</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>14</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>15</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>16</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>17</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>18</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>19</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>20</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>21</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>22</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>23</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>24</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>25</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>26</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

Answer 1

您正在为.halfblock的每个实例添加事件侦听器。对于像25这样的奇数个元素，前24个将相互抵消，你将留下一个切换的预期效果;对于像26这样的偶数，他们都会取消，什么都不会发生。

只需添加一次监听器，不需要.each：

$('.openlink').on('click', function(event) {
    event.preventDefault();
    var text = $(this).text();
    $(this).parent().parent().parent().toggleClass('opened');
    $(this).text(text == "schließen" ? "Weitere Infos" : "schließen");
});

您可能还会发现.closest('.halfblock')比.parent().parent().parent()更具可读性。

$('.openlink').on('click', function(event) {
    event.preventDefault();
    var text = $(this).text();
    $(this).closest('.halfblock').toggleClass('opened');
    $(this).text(text == "schließen" ? "Weitere Infos" : "schließen");
});

.halfblock .fulltext{
  display: none;
  font-size: 14px !important;
  margin-top: 20px;
  color: #222222 !important;
}

.halfblock.opened .fulltext{
  display: block;
}

.openfull{
  background: #111;
  color: #fff;
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="halfblock">
<div class="text">
    <h3>1</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>2</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>3</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>4</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>5</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>6</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>7</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>8</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>9</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>10</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>11</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>12</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>13</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>14</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>15</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>16</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>17</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>18</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>19</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>20</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>21</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>22</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>23</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>24</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>25</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>26</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

Answer 2

不使用事件.each()，而只使用事件选择器：

$('.halfblock .openlink').on('click', function(event) {
    event.preventDefault();
    var text = $(this).text();
    $(this).parent().parent().parent().toggleClass('opened');
    $(this).text(text == "schließen" ? "Weitere Infos" : "schließen");
});

.halfblock .fulltext{
  display: none;
  font-size: 14px !important;
  margin-top: 20px;
  color: #222222 !important;
}

.halfblock.opened .fulltext{
  display: block;
}

.openfull{
  background: #111;
  color: #fff;
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="halfblock">
<div class="text">
    <h3>1</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>2</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>3</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>4</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>5</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>6</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>7</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>8</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>9</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>10</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>11</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>12</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>13</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>14</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>15</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>16</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>17</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>18</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>19</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>20</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>21</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>22</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>23</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>24</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>25</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

<div class="halfblock">
<div class="text">
    <h3>26</h3>
    <p class="previewtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    <p class="fulltext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <p class="openfull"><span class="openlink">Weitere Infos</span></p>
</div>
</div>

Answer 3

您的脚本与此

相同

`$('.openlink').on('click', function(event) {
      event.preventDefault();
      var text = $(this).text();
      $(this).parent().parent().parent().toggleClass('opened');
      $(this).text(text == "schließen" ? "Weitere Infos" : "schließen");
  });`

你为什么写每个功能？当我用你的html编写这个脚本时，它工作正常

如果添加新元素，为什么jquery脚本无法正常工作？

3 个答案: