如何获取div中特定元素点击时的值?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何获取div中特定元素点击时的值?相关的知识,希望对你有一定的参考价值。

我在做一个搜索引擎程序。人们可以提出问题,它将被列在不同的div中。然后人们可以点击列出的一个问题来回答它,答案(和那个特定的问题)将被列在另一个div中。

但我的代码只显示在答案列表中输入的最后一个问题。因此,如果有3个问题,并且用户回答了第一个问题,预期的输出是。

Question 1?
Ans: Answer 1

但实际输出是:

Question 3?
Ans: Answer 1

function separate()
 {
    var question = document.createElement("p");
    question.innerhtml = document.getElementById("qInput").value;
    document.getElementById("stackDisplay").appendChild(question);
    question.addEventListener("click", answerBox);
 }

 function answerBox(ques)
 {
    document.getElementById("answerBox").style.display = "block";
 }

 var i =1;
 function collectAns() {
    if(event.key === 'Enter') {
        var quest = document.getElementById("qInput").value;
        var ans = document.getElementById("ansSpace").value;
        document.getElementById("ansDisplay").innerHTML += i+") "+quest+"<br> Ans: "+ans+"<br><br>";
        document.getElementById("answerBox").style.display = "none";
        i+=1;
    }
}
<div class="search">
    <input type="text" placeholder="Search.." name="search" id="qInput">
    <button type="submit" onclick="separate()">
        <i class="fa fa-search"></i>
    </button>
</div>

<div class="stack">
    <span id="stackDisplay">
        <center><b><u> LIST OF QUESTIONS</u></b></center>
        <button id="close" onmouseover="clo()"> &times; </button>
    </span>
    <button onmouseover="list()"> &#9776; </button>
</div>

<div class="ans">
    <span id="ansDisplay">
        <center><b><u> LIST OF ANSWERS</u></b></center>
        <button id="closeans" onmouseover="closeans()"> &times; </button>
    </span>
    <button onmouseover="listans()"> 
        <i class="fa fa-commenting-o"></i>
    </button>
</div>

<div id="answerBox">
    <center><b> Write your answer:</b></center>
    <button id="closeans" onmouseover="closeansbox()"> &times; </button>
    <textarea id="ansSpace" placeholder="Your answer here..." onkeydown="collectAns()"></textarea>
</div>

我知道这是因为 var quest = document.getElementById("qInput").value; 所以它只需要最后一个问题,但我不知道该写什么来代替这个。

我试着添加 question.addEventListener("click", function(){collectAns(ques)});separate() 但它打印 undefined 而不是问题。

我试着添加 var q = document.getElementById("stackDisplay").children;collectAns() 但我不知道他们会点击哪个问题,所以我不能给出索引,所以我写道 q[this] 打印时,它仍然给出了 undefined.

我应该怎么做才能让它显示问题?(尽可能不用jquery或php,只用html、css、javascript)

答案

我去掉了不必要的东西来回答问题。收集答案 的问题作为参数。要做到这一点,您可以使用 束缚 方法。

由于你在添加eventListners,你需要删除旧的,以防止它们也被执行。删除旧的困难在于你不知道它们的名字,它们是匿名的,因为使用了bind。你可以将它们存储在一个数组中,但更简单的是克隆节点,它不会克隆附着在它上面的eventlistners。

function separate() {
  var question = document.createElement("li");
  question.innerHTML = document.getElementById("qInput").value;
  document.getElementById("stackDisplay").appendChild(question);
  question.addEventListener("click", answerBox);
}

function answerBox() {
  const answerbox = document.getElementById("answerBox");
  const question = this.innerText;
  answerbox.querySelector('.ques').innerText = question;

  // find textarea, clone it and remove it
  // this is to remove any eventListener from it.
  const textarea = answerbox.querySelector('textarea');
  const new_textarea = textarea.cloneNode();
  textarea.remove();

  // add new eventListner with question as parameter
  new_textarea.addEventListener('keydown', collectAns.bind(null, this.innerText));
  answerbox.appendChild(new_textarea);

  // display answer box
  answerbox.style.display = "block";
}

var i = 1;

function collectAns(ques) {

  if (event.key === 'Enter') {
    var ans = document.getElementById("ansSpace").value;
    document.getElementById("ansDisplay").innerHTML += i + ") " + ques + "<br> Ans: " + ans + "<br><br>";
    document.getElementById("answerBox").style.display = "none";
    i += 1;
  }
}
<div class="search">
  <input type="text" placeholder="Question.." name="search" id="qInput">
  <button type="submit" onclick="separate()">
        add
    </button>
</div>

<h4>LIST OF QUESTIONS:</h4>
<ul id="stackDisplay"></ul>

<h4>LIST OF ANSWERS</h4>
<ul id="ansDisplay"></ul>

<div id="answerBox">
  <div>Write your answer to question "<span class="ques"></span>":</div>
  <textarea id="ansSpace" placeholder="Your answer here..."></textarea>
</div>

以上是关于如何获取div中特定元素点击时的值?的主要内容,如果未能解决你的问题,请参考以下文章

JQuery,如何清除,除了点击的元素以外,其他所有元素

jquery中如何获取当前DOM对象里的子元素?

如何查找 jQuery 中是不是存在具有特定 id 的 div?

使用伪类更改链接单击时的 div 背景和特征

如何用js获取div下的A标签,并自动点击超链接

jquery:尝试获取 div 高度时的值错误