Question

这是我的JS内部的HTML。函数“toggleMessage（）”是我用来隐藏和显示单击时显示消息的函数。我遇到的问题包括：

默认情况下显示的消息，默认情况下应隐藏（直到点击）。
点击后，所有消息都会立即显示 - 我只希望点击的消息显示。
每隔3秒填充页面的新邮件不会受到点击事件的影响 - 我希望它们能够生效。

function newMessage() {
  // Loop goes through emails and creats divs for subject, date, sender, and body
  var i = 0;
  while (i < window.geemails.length) {

    //email container
    var div = document.createElement("div");

    //date
    var dateField = document.createElement("h1");
    dateField.className = "date";
    dateField.innerHTML = window.geemails[i].date;
    div.appendChild(dateField);

    //subject
    var subjectField = document.createElement("h1");
    subjectField.className = "subject";
    subjectField.innerHTML = window.geemails[i].subject;
    div.appendChild(subjectField);

    //sender
    var senderField = document.createElement("h1");
    senderField.className = "sender";
    senderField.innerHTML = window.geemails[i].sender;
    div.appendChild(senderField);

    //body
    var bodyField = document.createElement("p");
    bodyField.className = "body";
    bodyField.innerHTML = window.geemails[i].body;
    div.appendChild(bodyField);

    //Separate message content into containers
    document.getElementById("main").appendChild(div);

    //inbox counter
    document.getElementById('counter').innerHTML = "You have " + document.getElementsByClassName("date").length + " messages";

    window.geemails.shift();
  }

}


newMessage();



//interval for loading new messages
function addNewMessage() {
  setInterval(function() {
    window.geemails.push(getNewMessage());
    newMessage();
  }, 3000);
}

addNewMessage();

//hiding and showing body message upon click
var messageBox = document.getElementsByClassName("subject");

for (var i = 0; i < messageBox.length; i++) {
  messageBox[i].addEventListener("click", toggleMessage);
}

function toggleMessage() {
  var showMessage = document.getElementsByClassName('body');
  for (var i = 0; i < showMessage.length; i++) {
    if (showMessage[i].style.display === 'none') {
      showMessage[i].style.display = "block";
    } else {
      showMessage[i].style.display = "none";
    }
  }
}

Answer 1

你需要一个班级来传递你的信息，并为他们的身体提供帮助。假设你有一个带有这样的消息体的消息div

 <div class="message">
     <div class="message-header">
     </div>
     <div class="message-body" style="display:none;">
     </div>
 </div>

如果您希望默认隐藏正文，请使用css display:none

然后在你的javascript中

$('.message').click(function(){
      $(this).children('.message-body').show();
});

如何修改我的功能以隐藏消息正文作为默认值并在点击时显示正文？

1 个答案: