您是什么动物？参加测验！

Question

我刚刚再次开始编码。这只是概念的证明。此代码有效！

但是我想添加额外的价值，而且不知道该怎么做。这样，如果您按一个答案，就可以得到多个值。因此，对于第一个问题，我不仅想成为猫。也是一条鱼。但是我该怎么做？

HTML

<head>
<link rel="stylesheet" href="index.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

您是什么动物？参加测验！

<form id="personalityQuiz">
    <h3> What is your favorite food?</h3>
    <input type="radio" name="food" value="cat"> I only eat meat.<br>
    <input type="radio" name="food" value="horse">  I'm a strict vegetarian.<br>
    <input type="radio" name="food" value="dog">  I love all food!<br>

    <h3> What is your favorite hobby?</h3>
    <input type="radio" name="hobby" value="horse"> I was born to run.<br>
    <input type="radio" name="hobby" value="dog">  Anything with a ball.<br>
    <input type="radio" name="hobby" value="cat">  Naps<br>

    <h3> What scares you?</h3>
    <input type="radio" name="fear" value="dog"> Vacuum cleaners.<br>
    <input type="radio" name="fear" value="cat">  Water<br>
    <input type="radio" name="fear" value="horse">  Anything that moves!<br>

    <input type="submit" value="Submit">
</form>


<div class="result" id="cat">
    <h2> You are a cat! </h2>
</div>
<div class="result" id="dog">
    <h2> You are a dog! </h2>
</div>
<div class="result" id="horse">
    <h2> You are a horse! </h2>
</div>
<div class="result" id="fish">
    <h2> You are a fish! </h2>
</div>

<script type='text/javascript' src='file:///Users/Desktop/index.js'></script>

JS

$("#personalityQuiz").submit(function(event) {

    event.preventDefault();

    var answers = $(this).serializeArray();
    var scores = {
        cat: 0,
        dog: 0,
        fish: 0,
        horse: 0
    };
    for(var answer of answers) {
        scores[answer.value] += 1;
    }

    var maxAnimal = "cat";
    for(var animal in scores){
        if(scores[animal] > scores[maxAnimal]){
            maxAnimal=animal;
        }
    }

    $("#personalityQuiz").css ('display','none');
    $(".result#"+maxAnimal).css ('display','block');    

});

Answer 1

这是我的主意-

您需要像

那样定义问题和答案查找

let attr = [NSForegroundColorAttributeName:self.configuration.settingsColor, NSFontAttributeName: self.configuration.settingsFont]

let title = NSAttributedString(string: self.configuration.settingsTitle,
                               attributes: attr)

基于以上对象（如果cat是答案），则根据键显示所有元素。

不够完美，但应该可以给您带来灵感

void initialise(Handler eventHandler) {
    addMenuItem(eventHandler, "New", new NewAction(shell),false);
    addMenuItem(eventHandler, "Edit", new EditAction(shell),false);
    menuItems.add(new SeparatorMenuItem());
    ... more items
}

void addMenuItem(Handler eventHandler, String text, Action action, boolean isCheck) {   
    actions.add(action);
    MenuItem it = isCheck ? new CheckMenuItem() : new MenuItem();
    it.setText(text);
    it.setData(action);
    it.setDisable(true);
    menuItems.add(it);
}

    ....
    menu = new ContextMenu();
    menu.getItems().clear();
    menu.getItems().addAll(getMenuItems(getSelection()));
    menu.setAutoHide(true);
    ...

var qalookup= { "cat" : ['cat','fish'],"dog" : ["dog"], "horse": ["horse"] };

Answer 2

您可以将Javascript数组或对象设置为值。 E.G

<input type="radio" name="food" value="{'firstValue':'cat','secondValue':'dog'}"/>

Answer 3

在显示得分最高的项目之前，您需要先隐藏所有 .result个项目。
注意：您可以使用jQuery hide和show方法：

$("#personalityQuiz").hide(); 
$(".result").hide(); // <---- add this
$(".result#"+maxAnimal).show();

Answer 4

（我误解了问题，但是如果答案对您有其他想法，将留下不完全相关的答案）

需要多个选项时，请使用复选框，而不要使用单选按钮。

查看本教程： https://www.tutorialrepublic.com/faq/how-to-get-the-values-of-selected-checkboxes-in-a-group-using-jquery.php

这个想法是您在多个复选框（而不是单选按钮）上设置了相同的名称，然后仅使用JQuery将所有选定项检索到数组中，如下所示：

var animals = [];
$.each($("input[name='animal']:checked"), function(){            
    animals.push($(this).val());
});

希望这会有所帮助！

Answer 5

如果您希望一个单选选项提供多个值，只需添加一个值即可，多个值之间用逗号分隔，例如：

<input type="radio" name="food" value="cat,lion,tiger"> I only eat meat.<br>

然后，在您的JavaScript中，只需使用简单的stringValue.split（'，'）将它们分开，这将为您提供单选所代表的值列表。

var valuesOfSingleSelection = stringValue.split( ',' );

如果您想更加详尽 您还可以创建一个查找表，其中某些值可以映射为更多值，例如：

var optionsLookup = {
  "cat" : [ "cat", "tiger", "lion" ],
  "dog" : [ "dog", "wolf" ],
  // etc.
};

这样，您可以更好地管理调查数据，而不必返回HTML。

如何在html中添加更多值选项？

您是什么动物？参加测验！

5 个答案: