Question

我正在创建一个表格，使人们可以在两个项目之间进行选择。当前，当您将鼠标悬停在某个项目上时，背景颜色会更改。

$('.survey').hover(
        function(){ $(this).addClass('value-selected') },
        function(){ $(this).removeClass('value-selected') }
        )

现在，我尝试使用.focusin做同样的事情：

        $('.survey').focusin(
            function(){ $(this).addClass('value-selected') },
            function(){ $(this).removeClass('value-selected') }
            )

但是，与.hover不同，这不起作用。

我想做的是将项目的背景色保留在选中的任何框上。

    $('input[name="question1"]').change(function() {
        resetQuestion('question2');

        // save answer1 and answer2 values of question1 into variables
        question1Answers.answer1 = $('.answer1 input[name="question1"]').prop('checked');
        question1Answers.answer2 = $('.answer2 input[name="question1"]').prop('checked');

        if (question1Answers.answer1) { // if user select answer1 of question1, then
            $('#question2').hide(); // hide question2 box
            $('#survey-title').hide(); // hide survey title (grey box)
            $('.survey-result.bg--item1').show(); // show item1 box
            $('.survey-result.bg--item2').hide(); // hide item2 box

        } else (question1Answers.answer2) { // if user select answer2 of question1, then
            $(this).focusin('value-selected')
            $('#question2').show(); // show question2
            $('#survey-title').show(); // show survey title (grey box)
            $('.survey-result.bg--item1').hide(); // hide item1 box
            $('.survey-result.bg--item2').hide(); // hide item2 box

我对jquery比较陌生，所以我不明白自己在做什么错，也无法使用插件来执行此操作。任何帮助/想法都将不胜感激。

编辑：

由于Suraj Menon在下面将我指向正确的方向，我现在能够使包装盒保持正确的颜色。但是，现在悬停功能不可用。

    $('.survey').hover(
        function(){ $(this).addClass('value-selected') },
        function(){ $(this).removeClass('value-selected') }
        )
    $('survey').on('click', function() {
            $('survey').removeClass('value-selected');
            $(this).addClass('value-selected')  
        })

Answer 1

在任何框上单击都可以为它添加一个称为“活动”的类，并在CSS中可以为其定义背景颜色。现在要进行切换，单击任何框的onclick都会删除“ .active”类（现在所有框都没有活动类），然后将其重新分配给单击的框。

您可以将event参数传递给按钮，以了解单击了哪个按钮。

希望这会有所帮助。

Answer 2

我终于可以通过结合悬停和点击功能的以下代码解决此问题：

    $('.survey').hover(
        function() {
            $(this).addClass('value-selected');
        }, function() {
            if(!$(this).hasClass('clicked') ){
                $(this).removeClass('value-selected');
            }
        }
    );

    $('.survey').click(function(e){
        e.preventDefault(); 
        e.stopPropagation;
        $('.clicked:not(:hover)').removeClass('clicked');
        $(this).addClass('clicked');
    });

我敢肯定它可以简化，但是可以做到。

如何在jQuery中保留框的选定颜色

编辑：

2 个答案: