JQuery переключает текст по клику

Question

Я пытался решить это, я несколько преуспел, но теперь я застрял.

У меня есть эта структура:

<h4>title</h4> 
<p>text</p> 
<hr /> 
<h4>title</h4> 
<p>text</p> 
<p>text</p> 
<hr /> 
<h4>title</h4> 
<p>text</p> 
<hr /> 

То, что я в основном пытаюсь выполнить для переключения слов Тонны (значение открытого) и verbergen (что означает скрытие), когда раздвигающееся вверх по P и вниз. В настоящий момент я добавляю span со словом tonen и проверяю его показанное или нет.

Содержимое скрыто от загрузки, отображается тоне, но при нажатии h4 содержимое отображается, но тоне не изменится на вербген. Я читал о жизни и жизни, но не понимаю.

<script> 
    $(function(){ 
    $("h4").append("<span> - tonen</span>"); 
    $("h4").nextUntil("hr").hide(); 
    $("h4").click(function() { 
     $(this).nextUntil("hr").slideToggle("fast"); 
     if(span.text() == " - tonen"){ 
      span.text(" - verbergen"); 
     } else { 
      span.text(" - tonen"); 
     } 
    }); 
    }); 
</script> 

Answer 1

Вам просто нужно, чтобы получить текст вашего текущего ребенка span из щелкнуло h4 и изменить на противоположный текст на основе текст извлекаться Span в:

$("h4").click(function() { 
    $(this).nextUntil("hr").slideToggle("fast"); 
    var text = $(this).find('span').text(); 
    $(this).find('span').text(text == " - verbergen " ? " - tonen " : " - verbergen "); 
}); 

Updated Fiddle

Answer 2

Это не похоже, что вы когда-либо объявляли свою переменную диапазона. Вам необходимо выбрать элемент, который вы будете манипулируете, а затем он должен работать:

<script> 
    $(function(){ 
     $("h4").append("<span> - tonen</span>"); 
     $("h4").nextUntil("hr").hide(); 
     $("h4").click(function() { 
      $(this).nextUntil("hr").slideToggle("fast"); 
      var $span = $(this).find('span'); 
      if($span.text() == " - tonen"){ 
       $span.text(" - verbergen"); 
      } else { 
       $span.text(" - tonen"); 
      } 
     }); 
    }); 
</script> 

Demo

Answer 3

$("h4").append(" - <span>tonen</span>").click(function() { 
    var $sp = $('span', this); 
    $(this).nextUntil("hr").slideToggle("fast"); 
    $sp.text($sp.text()=="tonen"?"verbergen":"tonen"); 
}).nextUntil("hr").hide(); 

LIVE DEMO 2

$("h4").append(" - <span>tonen</span><span style='display:none;'>verbergen</span>").click(function() { 
    $(this).nextUntil("hr").slideToggle(400).end().find('span').toggle(); 
}).nextUntil("hr").hide(); 

Answer 4

Вот короткий скрипт, который показывает первый абзац, но скрывает все остальные, если 'больше ...' не будет нажата. Он даже создает кнопку «больше ...». Все, что вам нужно сделать, чтобы использовать это обернуть блок текста (который содержит ряд пунктов) между ... и инициировать сценарий:

<script> 
$(function(){ 
    $(".teaser p").eq(0).attr("class","clsTea"); 
    $(".teaser").after("<span class='moreTea'>more...</span>"); 
    $(".clsTea").siblings().css("background-color","yellow").hide(); 
    $(".moreTea").click(
    function(){ 
     var clktxt = $(".moreTea").text(); 
     $(".clsTea").siblings().toggle(1000,function(){ 
      if (clktxt=='more...'){ 
       $(".moreTea").text('less...'); 
      } else { 
       $(".moreTea").text('more...'); 
      } 
     }); 
    }); 
}); 
</script> 

Я надеюсь, что это помогает