Question

1）我正在根据JSON渲染消息。首先，我只需要显示该JSON的3条信息（JSON有6个attrs）。用户单击呈现的消息时，它应该显示其他信息，例如description，我需要获取该div的ID。问题是，我无法访问该ID。我有主要的div消息，然后根据json将message_items添加到该div中。当我尝试获取该div的ID时，它会写未定义... 我的代码如下： 2）如何存储有关该div的其他信息，但我不想将其显示出来？

$(".messages").on('click','.message__item', function(e) {

  documentView.clearContent();

  var targetElement = event.target || event.srcElement;
        alert(targetElement);

        var id = $(this).attr("id"); // DOES NOT WORK - UNDEFINED
        alert(contentPanelId);

    const data = {
      title: $(this).find(".title").text(),
      date: $(this).find(".date").text(),
      desc: document.getElementById("descr").value,
      createdBy: document.getElementById("createdBy").value,
      id: targetElement.id // DOES NOT WORK, UNDEFINED
    };
    documentView.renderDocument(data);
});


export const fillDocuments = (data) => {

    console.log("DATA. "+ data);

    for(var i = 0; i < data.length; i++){

        const markup = `
          <div class="message__item id=${data[i].id}>
              <img src="../img/copy.svg" class="item-type">
          <div class="title">
              ${data[i].title}
          </div>
          <div class="date">
             ${formatTimeForMessages(data[i].uploadDatetime)}
          </div>
          <div class="read">
              XY
          </div> 
          // THIS DOES NOT WORK FOR ME AGAIN
          <input type="hidden" id="descr" value="${data[i].description}"></input>
          <input type="hidden" id="createdBy" value="Someone"/>
      </div>`;

      console.log("MRK "+ markup);

      elements.messages.insertAdjacentHTML("beforeend", markup);
    }
};

Answer 1

首先，您没有关闭“ message__item”名称附近的课程引用。以及如何以不可见的方式存储数据？使用数据属性，例如here。下面是一个有效的例子。

$(".messages").on('click','.message__item', function(e) {

  ///documentView.clearContent();

  var targetElement = event.target || event.srcElement;
        alert(targetElement.nodeName);
    console.log(this);
        var id = $(this).attr("id"); // DOES NOT WORK - UNDEFINED
        alert(id);
        alert(this.dataset.title);

    const data = {
      title: $(this).find(".title").text(),
      date: $(this).find(".date").text(),
      desc: document.getElementById("descr").value,
      createdBy: document.getElementById("createdBy").value,
      id: targetElement.id // DOES NOT WORK, UNDEFINED
    };
    //documentView.renderDocument(data);
});


var fillDocuments = (data) => {

    for(var i = 0; i < data.length; i++){

        const markup = `
          <div class="message__item" data-title="${data[i].title}" id=${data[i].id}>
              <img src="../img/copy.svg" class="item-type">
          <div class="title">
              ${data[i].title}
          </div>
          <div class="date">
             ${(data[i].uploadDatetime)}
          </div>
          <div class="read">
              XY
          </div> 
          // THIS DOES NOT WORK FOR ME AGAIN
          <input type="hidden" id="descr" value="${data[i].description}"></input>
          <input type="hidden" id="createdBy" value="Someone"/>
      </div>`;

      $("#messages").get(0).insertAdjacentHTML("beforeend", markup);
    }
};

fillDocuments([
  {id:1, uploadDatetime:Date(), title: 'Title here', description: 'Desc...'}
])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages" class="messages">

</div>

获取div的id

1 个答案: