javascript - 更改p标签以在每次点击时输入(Change p tag to input on click for each)

Question

<div th:each="category : ${allUserCategories}"

               th:id="${category.id}"
               class="list-group-item list-group-item-action max-width-none category-item">
            <p th:text="${category.name}"></p>
            <div style="display: flex">
              <a class="mdi mdi-pencil"></a>
            </div>
          </div>

For each category, a pencil sign is shown and the category name.

(对于每个类别，都会显示一个铅笔符号和类别名称。)

I want to be able to click on the pencil and for the p tag to change to input and the pencil changes to a save.

(我希望能够单击铅笔并将p标签更改为输入，并将铅笔更改为保存。)

Then the save should be linked to the Spring controller.

(然后，保存应该链接到Spring控制器。)

How can I do this?

(我怎样才能做到这一点？)

Note: This is not a duplicate as I am using Thymeleaf for each category

(注意：这不是重复的，因为我为每个类别使用Thymeleaf)

I have tried...

(我试过了...)

<a class="mdi mdi-pencil" id="test" th:onclick="loadContent()"></a>

function loadContent() {
     var $el = $('#categoryName');
     var $input = $('<input/>').val( $el.text() );
     $el.replaceWith( $input );
        var save = function(){
            var $p = $('<p data-editable />').text( $input.val() );
            $input.replaceWith( $p );
        };
        $input.one('blur', save).focus();
    }

But the problem is that it doesn't select after one click to the first category in the list, it doesn't work after that.

(但是问题在于，单击列表中的第一个类别后，它不会选择，此后它将不起作用。)

Also how to show save icon and link to method in controller?

(另外如何显示保存图标并链接到控制器中的方法？)

  ask by gecet90856 translate from so

Answer 1

If you want to add a save link you can just do so, by adding a link to the controller in question.

(如果要添加保存链接，只需添加链接到有问题的控制器即可。)

So what I think you are trying to achieve can be changed as follows:

(因此，我认为您要实现的目标可以进行如下更改：)

Add the id to your onclick event

(将ID添加到您的onclick事件中)

<div id="${category.id}">
  <div>
     <p th:id="'paragraph'+${category.id}" th:text="${category.name}">category.name</p>
     <a th:onclick="'javascript:loadContent('+${category.id}+')'">pencil</a>
  </div>
</div>

function loadContent(id) {
     var $paragraph = $('#paragraph'+id);
     var $input = $('<input/>').val( $paragraph.text() );
     $paragraph.replaceWith( $input );
     var save = function(){
        var $p = $('<p data-editable />').text( $input.val());
      $p.attr('id', 'paragraph'+id);
      $input.replaceWith( $p );
      // Call some $.ajax here by using the provided id
     };
     $input.on('blur', save).focus();
}