Как заменить текст в элементе по клику?

175

08 августа 2018, 03:20

Пробовал также вместо .html использовать .text. Не работает. Что я делаю не так?

$('.expand').click(function() { 
  var $this = $(this); 
  var text = $this.find('.expand_text').html(); 
 
  function textToggle() { 
    if ($(text) == 'expand') { 
      $(text).html('To curtail'); 
    } else { 
      $(text).html('expand'); 
    } 
  } 
  textToggle(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="comment_block"> 
  <div class="expand"> 
    <img class="expand_img" src="/image/expand.png" alt=""> 
    <span class="expand_text">expand</span> 
  </div> 
  <a href="#comment" class="btn_add btn_add-top js_modal"> 
    <span class="com_add">Add Comments</span> 
    <span class="icon icon_add">+</span> 
  </a> 
</div>

Answer 1

Методы html и text нужно вызывать для самого элемента .expand_text, а не для его внутреннего html-a:

$(".expand").on("click", function() { 
  var $text = $(this).find(".expand_text"); 
  $text.text($text.text() == "expand" ? "To curtail" : "expand"); 
});

<div class="expand"> 
  <img class="expand_img" src="/image/expand.png" alt="" /> 
  <span class="expand_text">expand</span> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Нельзя в JavaScript ставить знак $ перед переменной и использовать зарезервированное слово this для обозначения переменной, так что var $this неверный синтаксис