Question

我正在尝试制作一份动态调查问卷，让每个新问题出现错觉，然后出现在答案点击上。

DOM树是：

CONTAINER [QUESTIONSTART [答复] 质询 [答复] ]

每个问题没有正确的答案，每个答案都需要增加一个全局变量，该变量对应于特定特征的强度，然后隐藏该问题div并显示下一个。由于jQuery onclick是在ANSWER（QUESTION的一个孩子）中，我认为代码看起来像这样......但我无法让它工作。所有问题都将设置为＆＃34; display：none＆＃34;默认情况下。

$(".answer").click(function () {
    $(this).parent().sibling().next().css("display","block");
    $(this).parent().css("display","none");
    ++a;
});

所以这是我的问题：

如何执行此操作而不为每个问题分配ID。这个问卷将是200多个问题，我想避免分配一个id来回答选项，每200个问题有4个答案，那就是800个ids ...哎呀！我的jsfiddle在这里https://jsfiddle.net/Cory17255/hskngmL4/7/

先谢谢你的帮助！我还是JavaScript的新手。

编辑：要解决拼写错误，功能仍无效。

Answer 1

您使用的是css（）错误。需要设置2个参数。

$(".answer").click(function () {
  $(this).parent().Sibling().next().css("display","block");
  $(this).parent().css("display","none");
  ++a;
});

Answer 2

并且Sibling()应为siblings()，并且无需使用您的DOM调用。此外，这可以通过一个链接来完成

$(".answer").click(function () {
    $(this).parent().css("display","none").next().css("display","block");
    ++a;
});

我认为您可以通过获取所点击.answer .questionStart的索引并获得.answer .question具有相同索引的内容来完成您的工作。

$(this).index(); // will return the clicked answer's index
$(this).parent().index(); // will return the clicked question's index

我猜这是A型与B型的特性测试？在这种情况下，这是index()的一个示例。

https://jsfiddle.net/chidea/hskngmL4/14/

ans[$(this).parent().css("display","none").next().css("display","block").end().end().index()]++;

在第9版这个小提琴上留下.index()是错误的.. 当然，如果没有要存储的变量，这将返回索引并丢弃。

在这个14日，.end().end()将结束父母下一个兄弟的链选择，然后再返回选择self。因此，调用.end().end().index()将获得答案的索引，在其父级div中。根据您的小提琴中的DOM，此索引值将仅为0或1，因此可用于订阅结果数组var rst = [0,0];。因此，您可以在需求答案超过2的情况下延长此数组。

嗯，链选择只是一个函数，它返回它的目标对象，它是用参数给出的，可以在它之后重复用于另一个任务。几乎每个JQuery的功能都是由它构成的，值得一看。

Official document of chain selection

所以，它一步一步来。 $(this)将选择.answer div本身并返回自身。我们将此返回链选择它的父.questionStart div并使用.css(...)更改其显示css属性。接下来，使用.question选择它的下一个.next() div并同时更改它的css属性，然后使用.questionStart和另一个.end()返回.end() {1}}返回.answer div并使用.questionStart在.question或.index() div内获取该索引，以将其用作结果索引数组和++它。

Answer 3

答案：答案来自Ch.Idea，但我想让其他人都能看到使其运作的代码。这样做是隐藏父元素，然后显示该父元素的下一个兄弟，而不必创建ID。我不知道为什么最终需要使用.index才能使它工作，所以希望Ch.Idea可以回应它的工作原理但是......它很有效。

提醒我的DOM树是：集装箱[QUESTIONSTART [答案]，问题[答案]]

$(".className").click(function () {
    $(this).parent().css("display","none").next().css("display","block").index();
});

JSFiddle在这里http://jsfiddle.net/chidea/hskngmL4/10/

Jquery - Onclick：隐藏父容器，显示兄弟容器，调用函数来增加变量

3 个答案: