主页 / 问题 / 1406089
Accepted
amarok36
Asked:2022-07-03 16:34:04 +0000 UTC2022-07-03 16:34:04 +0000 UTC

为什么 .append 只添加一次块？jQuery

  • 772

通过单击#add-button表格，应该会出现#to-do-list一个带有卡片的块，其中包含来自input和表格的数据。textarea下次单击下面的按钮时，应该会出现一个新块，依此类推。该块只出现一次。再次填写表格时，不会出现新块，第一个创建的数据块中的数据只是更改。如何实现新块的出现？

document.querySelector('form').addEventListener('submit', (e) => e.preventDefault()); // Чтобы страница не перезгружалась в Code Snippet-е

$(function() {

  let tmp = `<div class="case">
            <div class="case-title">
            <span></span>
            <div class="clear-button"></div></div>
            <div class="case-body"></div>
         </div>`; // вид карточки

  $('#add-button').on('click', function() {
    let h_val = $('#name-field-input').val().trim(), // значение поля из input
      d_val = $('#description-field').val().trim(); // тоже самое из textarea

    if (h_val.length > 0 && d_val.length > 0) {
      tmp = $(tmp);
      tmp.find('.case-title > span').text(h_val); // вставим в карточку заголовок
      tmp.find('.case-body').text(d_val); // тоже самое с описанием

      $('.fixed-container #to-do-list').append(tmp); // далее добавляем новую карточку 
    }

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fixed-container">
  <div id="to-do-list">
    <div class="heading">Список дел:</div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 1 </span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 2</span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
  </div>
  <div id="new-case">
    <div class="heading">Добавить новое дело</div>
    <div class="case">
      <form method="post">
        <label for="name-field">* Название</label>
        <input required="required" id="name-field-input" type="text" name="name-field">
        <label for="description-field">* Описание</label>
        <textarea required="required" id="description-field" name="description-field"></textarea>
        <button id="add-button">Добавить дело</button>
      </form>
    </div>
  </div>
</div>

javascript

2 个回答

  1. Best Answer

    如果您只需要在模板中插入文本，那么我建议一个更简单、更可靠的选项：

    document.querySelector('form').addEventListener('submit', (e) => e.preventDefault()); // Чтобы страница не перезгружалась в Code Snippet-е

$(function() {

  const tmp = (titleText, bodyText) => `<div class="case">
            <div class="case-title">
            <span>${titleText}</span>
            <div class="clear-button"></div></div>
            <div class="case-body">${bodyText}</div>
         </div>`; // Карточка

  $('#add-button').on('click', function() {
    const h_val = $('#name-field-input').val().trim(), // значение поля input
      d_val = $('#description-field').val().trim(); // значение поля textarea

    if (h_val.length > 0 && d_val.length > 0) {
      $('.fixed-container #to-do-list').append(tmp(h_val, d_val)); // Добавляем новую карточку 
    }

  });

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fixed-container">
  <div id="to-do-list">
    <div class="heading">Список дел:</div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 1 </span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 2</span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
  </div>
  <div id="new-case">
    <div class="heading">Добавить новое дело</div>
    <div class="case">
      <form method="post">
        <label for="name-field">* Название</label>
        <input required="required" id="name-field-input" type="text" name="name-field">
        <label for="description-field">* Описание</label>
        <textarea required="required" id="description-field" name="description-field"></textarea>
        <button id="add-button">Добавить дело</button>
      </form>
    </div>
  </div>
</div>

    我还记得我们还有一个模板标签。您通常可以从 JS 中删除模板：

    document.querySelector('form').addEventListener('submit', (e) => e.preventDefault()); // Чтобы страница не перезгружалась в Code Snippet-е

$(function() {

  const tmp = (titleText, bodyText) => {
    const template = $('#template-case').contents().clone(true);
    
    template.find('.case-title-text').html(titleText);
    template.find('.case-body').html(bodyText);
    
    return template;
  }; // Карточка

  $('#add-button').on('click', function() {
    const h_val = $('#name-field-input').val().trim(), // значение поля input
      d_val = $('#description-field').val().trim(); // значение поля textarea

    if (h_val.length > 0 && d_val.length > 0) {
      $('.fixed-container #to-do-list').append(tmp(h_val, d_val)); // Добавляем новую карточку 
    }

  });

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fixed-container">
  <div id="to-do-list">
    <div class="heading">Список дел:</div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 1 </span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 2</span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
  </div>
  <div id="new-case">
    <div class="heading">Добавить новое дело</div>
    <div class="case">
      <form method="post">
        <label for="name-field">* Название</label>
        <input required="required" id="name-field-input" type="text" name="name-field">
        <label for="description-field">* Описание</label>
        <textarea required="required" id="description-field" name="description-field"></textarea>
        <button id="add-button">Добавить дело</button>
      </form>
    </div>
  </div>
</div>

<template id="template-case">
  <div class="case">
    <div class="case-title">
      <span class="case-title-text"></span>
      <div class="clear-button"></div>
    </div>
    <div class="case-body"></div>
  </div>
</template>

    确实，IE 不支持这个，但是这样 JS 可以摆脱 HTML 代码。是的，就我而言，在 html 文件中编辑 HTML 比在 JS 中方便得多，无论 IDE 如何尝试建议它:)

    • 1

  2. 你可以试试

    tmp = $(tmp);

    写

    tmp = $(tmp).clone();

    但它仍然很可能会出错

    应该改写

    tmp = $(tmp);

    像这样：

    let localTemplate =  $(tmp);

    并继续与localTemplate

    因为 你最终会覆盖变量tmp

    • 0

相关问题