Question

我目前正在研究这个问题，但它没有完全正常工作，可能是其他声明？基本上，如果.grey-square处于活动状态，则将隐藏输入字段的值设置为“true”，如果代码中未激活/取消隐藏，则将值设置为空。我有大量的q因此长列表但我不确定这是正确的吗？

<input type="text" class="answerStored hidden" name="q1" id="q1">

<script>
$(function() {
$('.one').bind('click', function() {
    if($(this).hasClass('grey-square')) {
        $("#q1").attr("value", true);
    }
    else {
        $("#q1").attr("value", '');
    }
});
$('.two').bind('click', function() {
    if($(this).hasClass('grey-square')) {
        $("#q2").attr("value", true);
    }
    else {
        $("#q2").attr("value", '');
    }
});
$('.three').bind('click', function() {
    if($(this).hasClass('grey-square')) {
        $("#q3").attr("value", true);
    }
    else {
        $("#q3").attr("value", '');
    }
});
});
</script>

Answer 1

您应该使用.on而不是.bind，因为“.bind”只是“.on”的内部映射，可能会在其他jquery版本中删除。要读取/设置值，应使用“.val（value）”函数正确设置值。最后但并非最不重要的是，您正在为问题分配一个“隐藏”类，因此在“else”情况下，您需要删除隐藏的类，或者只需调用“.show（）”

此外，尽量避免重复代码。检查你是否可以使它更通用并更新你的html结构，所以点击“.one”javascript可以找到相应的“q1”，或者如果这不可能，添加一个函数，只需调用函数“

function checkHiddenValue(triggerElement, targetElement) {
    if($(triggerElement).hasClass('grey-square')) {
            $(targetElement).val(true);
        }
        else {
            $(targetElement).val('');
        }
    }
}

$('.one').on('click', function() {
    checkHiddenValue(this, '#q1'));
});

Answer 2

您可以将其简化为：

<button class='one' data-id="q1">One</button>
<button class='two' data-id="q2">One</button>
<button class='three' data-id="q3">One</button>
......

您需要在点击的项目上设置data-*属性，上面的内容只是演示如何操作。

$('.one, .two, .three').on('click', function() {
  var hasGrey = $(this).hasClass('grey-square'),
    target = $(this).data('id');
  $("#" + target).attr("value", hasGrey ? 'true' : '');
});

示例演示：

 $('.one, .two, .three').on('click', function() {
   var hasGrey = $(this).hasClass('grey-square'),
     target = $(this).data('id');
   $("#" + target).attr('value', hasGrey ? 'true' : '');

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='q1' name='q1' >
<input type='text' id='q2' name='q2'>
<input type='text' id='q3' name='q3'><br>
<button class='one grey-square' data-id="q1">One</button>
<button class='two grey-square' data-id="q2">Two</button>
<button class='three grey-square' data-id="q3">Three</button>

Answer 3

你写了这个：

$("#q1").attr("value", true);

试试这个：

$("#q1").attr("value", "true");

JQuery如果class是活动的if语句

3 个答案: