Question

我有下面的代码示出了一个表单字段，分段成的DIV，在时间，在那里下一个的每次点击隐藏当前的div和显示下一个：

是否可以使用jQuery完成上述工作？这将如何实现？

究其原因是因为如果我能避免jQuery的althogether，它是我的项目的优先选择，因为我不应该依赖于外部文件。

谢谢

Answer 1

您可以只使用普通的旧javascript。 jQuery只是引擎盖下的JavaScript的抽象。

所以不是

$(".questionholder").stop().hide();

您可以这样做

var lastQuestionId = '...';
var x = document.getElementsByClassName("questionholder");
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
}
document.getElementById(lastQuestionId).style.display = 'block';

Answer 2

您可以这样更改功能；

function displayquestion(a){
  var questions = document.getElementsByClassName("questionholder");
  for(var i=0; i < questions.length; i++) {
    questions[i].style.display = "none";
  }

  var nextQuestion = document.getElementById("question" + a);
  if(nextQuestion !== null) {
    nextQuestion.style.display = "block"
  }
}

Answer 3

您可以使用DOM函数获取元素，隐藏和显示它们：

function displayquestion (index) {
  document.getElementById('question' + (index - 1)).style.display = 'none';
  document.getElementById('question' + index).style.display = 'block';
}

Answer 4

使用香草JavaSrcipt可以采用多种方法。一种写法是这样的：

function displayquestion(questionID) {
  document.querySelectorAll('.questionholder').forEach((element) => {
    element.style.display('none');
  });
  document.getElementById(questionID).style.display('block');
}

您还可以使用classList.toggle和类来代替设置内联样式

没有jQuery，是否可以切换div？

4 个答案: