javascript - 如何制作类似按钮的过滤器？

Question

我想在我的网站中制作一个类似按钮的过滤器。现在，我只是将单选按钮过滤器放在框内，但我想删除单选按钮并在单击框时让过滤器工作。

代码现在看起来像这样:

                        <div class="question-header" data-bind="visible: jobQuestions().length > 0">
                            <div class="col-sm-3" id="filter-1">
                                <div class="panel-body">
                                    <input type="radio" value="new" data-bind="checked: jobQuestionsFilter" class="" />
                                    New Questions
                                    (<span data-bind="text: newJobQuestionsCount"></span>)
                                </div>
                            </div>
                            <div class="col-sm-3" id="filter-2">
                                <div class="panel-body"">
                                    <input type="radio" value="ignored" data-bind="checked: jobQuestionsFilter" />
                                    Ignored Questions
                                    (<span data-bind="text: ignoredJobQuestionsCount"></span>)
                                </div>
                            </div>
                            <div class="col-sm-3" id="filter-3">
                                <div class="panel-body">
                                    <input type="radio" value="answered" data-bind="checked: jobQuestionsFilter" />
                                    Answered Questions
                                    (<span data-bind="text: answeredJobQuestionsCount"></span>)
                                </div>
                            </div>
                            <div class="col-sm-3" id="filter-4">
                                <div class="panel-body">
                                    <input type="radio" value="all" data-bind="checked: jobQuestionsFilter" />
                                    All Questions
                                    (<span data-bind="text: allJobQuestionsCount"></span>)
                                </div>
                            </div>
                        </div>

我需要修复什么？

编辑:

当我尝试将其悬停时，整个框的 bg-color 会发生变化，但当我只是单击它时，只有它的一部分发生变化。我假设这是因为标签尺寸未满。我该如何解决这个问题？

Answer 1

您可以通过向每个单选按钮添加 id 然后将 .panel-body 包装在 label 中来解决此问题，例如这个:

<label for="radio1">
    <div class="panel-body">
        <input type="radio" value="new" id="radio1" data-bind="checked: jobQuestionsFilter" class="" />
        New Questions
        (<span data-bind="text: newJobQuestionsCount"></span>)
    </div>
</label>

然后在您的 css 中将 display: none 应用于您要隐藏的所有单选按钮。

编辑

我创建了一个 codepen这会给你想要的结果。您唯一需要做的就是像您提供的图像一样水平排列按钮。我希望这能让你走上正轨。

尝试一下，熟悉它的工作原理。