Как правильно обратиться к элементу по дом-дереву?

Question

[Qurel]

Есть 2 блока. В первом блоке есть иконка, класс которой нужно менять. Во втором блоке есть 2 кнопки:
1. Добавить комментарий
2. Удалить комментарий

Эти 2 блока выводятся циклом на страницу

Как правильно обратиться к иконке по дом-дереву (менять класс) при клике на кнопку?

<span class="js-notepad-show-ads b-notepad__feedback-letter_title">
    <i class="b-notepad__feedback-letter_title_icon fa fa-plus"></i>
    Добавить комментарий
</span>
<div style="display: none" class="b-notepad__feedback-letter_block text_center" data-id="{$item.id}">
    <textarea class="b-notepad__feedback-letter_block_textarea">{$item.comment}</textarea>
    <button type="button" class="button button__blue js-received-comment" data-action="save">{'received.Сохранить'|t} 
    </button>
    <button type="button" class="button button__red js-received-comment" data-action="remove">{'received.Удалить'|t} 
    </button>
</div>

Этот код не работает:

$('.js-received-comment').click(function () {
        var commentIcon = $(this).parent().prev().find('.b-notepad__feedback-letter_title_icon');
        console.log(commentIcon);
        var commentText = $(this).prev().$('.b-notepad__feedback-letter_block_textarea');

        if($(commentText).val() == '') {
            $(commentIcon).removeClass('fa-exclamation').addClass('fa-plus');
        } else {
            $(commentIcon).removeClass('fa-plus').addClass('fa-exclamation');
        }
    });

Answer 1

[Sergey]

$(“.js-recieved-comment”).on(“click”, function() {
   If($(this).attr(“data-action”) == “save”) {
       $(“.b-notepad__feedback-letter_title_icon”).removeClass('fa-exclamation').addClass('fa-plus');
    } else if ($(this).attr(“data-action”) == “remove”) {
        $(“.b-notepad__feedback-letter_title_icon”).removeClass('fa-plus').addClass('fa-exclamation');
    }
});

Писал с айпада, не проверял, но должно работать, если где опечатки нет

Comments

[Qurel]

Спасибо, нашла другой вариант, но ваш код в понедельник попробую

На проекте уже была написана функция, я просто добавила код и все заработало:

$('.js-received-comment').click(function(){
  var wrap = $(this).parent();
  var data = {
	id: wrap.data('id'),
	comment: wrap.find('textarea').val(),
	action: $(this).data('action')
  };

  $.ajax({
	type: "POST",
	data: data,
	url: "/notepad/receivedComment",
	dataType: "json",
	context: this,
	success: function(res){
	if(!res.error) {
	if (data.action === 'save') {
       //мой код
          if(wrap.find('textarea').val() !== '') {
             wrap.prev().find('.b-notepad__feedback-letter_title_icon').removeClass('fa-plus').addClass('fa-exclamation')
        }
	//

	wrap.hide();
	}
	if (data.action === 'remove') {
							    
	//мой код
          wrap.prev().find('.b-notepad__feedback-letter_title_icon').removeClass('fa-exclamation').addClass('fa-plus');
         //
	wrap.find('textarea').val('').end().hide();
	}
    }
   }
 });
});

[Qurel]

Но есть одна проблема: когда я написала комментарий, сохранила его, потом открыла его редактировать, удалила все из textarea - иконка не поменялась на плюс

[Qurel]

Поправила:

if(wrap.find('textarea').val() !== '') {
        wrap.prev().find('.b-notepad__feedback-letter_title_icon').removeClass('fa-plus').addClass('fa-exclamation')
  } else {
        wrap.prev().find('.b-notepad__feedback-letter_title_icon').removeClass('fa-exclamation').addClass('fa-plus')
    }

Теперь все работает как надо