Question

我正在处理一个项目，其中包含从表单输入填充的json数据对象，我想根据输入选择比较给定的集合，如下所示：

Question 1
<input type="radio" name="q30" value="135" id="30"> 
<input type="radio" name="q30" value="133" id="30"> 
<input type="radio" name="q30" value="134" id="30"> 
<input type="radio" name="q30" value="136" id="30"> 

Question 2
<input type="radio" name="q31" value="12" id="31"> 
<input type="radio" name="q31" value="13" id="31"> 
<input type="radio" name="q31" value="14" id="31"> 
<input type="radio" name="q31" value="15" id="31">

在我的javascripts中，我想在每个问题上填写用户响应：

var response = [];

Array.prototype.inArray = function(comparer) {
    for(var i=0; i < this.length; i++) {
        if(comparer(this[i])) return true;
    }
    return false;
};

Array.prototype.pushIfNotExist = function(add, comparer) {
    if (!this.inArray(comparer)) {
        this.push(add);
    }
};

$('#form input').on('change', function() {

   var add = {'q': $(this).attr('id'), 'r': $(this).attr('value')}

   response.pushIfNotExist(add, function(e) {
        return e.q === add.q;
   });

   console.log(JSON.stringify(response));
});

上面的代码似乎有效，但唯一的问题是没有更新点击事件的r变量。

当前输出： 在问题1中的不同无线电上点击3次后，值为（134,133,135）：

[{"q":"30","r":"134"}]
[{"q":"30","r":"134"}]
[{"q":"30","r":"134"}]

期望输出：

[{"q":"30","r":"134"}]
[{"q":"30","r":"133"}]
[{"q":"30","r":"135"}]

NB：

从上面我只想为每个问题注册一个响应，无论每个问题的无线电点击次数如何。所以，只要我点击问题1中的选项，我想阻止添加新的响应文档，除非我改为问题2.希望现在明白。

可能是我做错了或有更好的方法，请有人帮忙吗？

感谢。

Answer 1

首先，正如其他人所说，不要在HTML中使用重复的id值。这绝不是一种好的做法。

<div>
    Question 1
    <input type="radio" name="q30" value="135" id="30">
    <input type="radio" name="q30" value="133" id="31">
    <input type="radio" name="q30" value="134" id="32">
    <input type="radio" name="q30" value="136" id="33">
</div>

<div>
    Question 2
    <input type="radio" name="q31" value="12" id="34">
    <input type="radio" name="q31" value="13" id="35">
    <input type="radio" name="q31" value="14" id="36">
    <input type="radio" name="q31" value="15" id="37">
</div>

其次，我对你的javascript稍作修改如下：

var response = [];    

    $('input').on('change', function() {
        var add = {'q': $(this).attr('name'), 'r': $(this).attr('value')}
        var added = false;
        for(var i = 0, j = response.length; i < j; i++){
            if(response[i].q === add.q){
                if(response[i].r != add.r){
                    response[i].r = add.r;
                    added = true;
                }
                added = true;                    
            }
        }
        if(!added)
            response.push(add);

        console.log(JSON.stringify(response));
    });

它有点乱，但它确实有效。此处的响应数组中没有添加重复的问题。

Answer 2

您目前拥有HTML的方式是问题的罪魁祸首，您需要在元素上使用单独的唯一ID，以使代码能够正常工作。

现在，如果您希望所有'q'值都相同，则需要获取该属性并使用.substring(1)将其从第一个索引向前移动：'q30'.substring(1)将等于{{ 1}}

像这样：

'30'

我在下面的JSFiddle中粘贴了您的示例，请注意我删除了您拥有的#form选择器，因为它未包含在您的HTML中：

奖励，你不需要（通常不应该）将这些功能添加到Array原型中，我也清理了它，下面的代码就足够了：

Question 1
<input type="radio" name="q30" value="135" id="30">
<input type="radio" name="q30" value="133" id="31"> 
<input type="radio" name="q30" value="134" id="32"> 
<input type="radio" name="q30" value="136" id="33"> 

Question 2
<input type="radio" name="q31" value="12" id="34"> 
<input type="radio" name="q31" value="13" id="35"> 
<input type="radio" name="q31" value="14" id="36"> 
<input type="radio" name="q31" value="15" id="37">

Link to Fiddle

Answer 3

首先，不要在你的HTML中复制id。 ID在整个页面中应该是唯一的。您可以使用name属性来识别输入。

将$(this).attr('id')替换为$(this).attr('name')，并在比较函数中稍作修改。

response.pushIfNotExist(add, function(e) {
   return e.q === add.q && e.r === add.r;
});

这里是plunkr

使用click事件检查Javascripts对象中是否存在数据

3 个答案: