Question

我有一份网络调查问卷。它是一系列问题，每个问题都有一系列答案替代。每 “回答替代”是一个asp输入按钮。每当用户单击一个按钮时，该按钮将返回一个新类并删除用户希望回答的那个问题的其他答案按钮中的同一个班级该类改变了按钮的样式，因此用户可以清楚地看到他或她对给定问题的选择。

使用jquery使用javascript完成删除/添加类。现在我为每个答案使用不同的功能。既然会有很多问题我觉得可能有更好的办法。如果我有一个全局方法/函数或任何它被调用的那将是很好的只是“查看”该给定按钮的第二个类（我的输入按钮有两个类），从所有其他按钮中删除所有“active_vertical” 与它“看”的按钮具有相同的第二类。或其他一些解决方案。我是javascript和jquery的新手，并且对一般编程知之甚少，所以我不知道如何做这样的事情。继承人jquery代码：

$(function () {
        $(".car_insurance_type_button").click(function () {
            $(".car_insurance_type_button").removeClass("active_vertical");
            $(this).addClass("active_vertical");
        });
    });

    $(function () {
        $(".skadefria_ar_button").click(function () {
            $(".skadefria_ar_button").removeClass("active_vertical");
            $(this).addClass("active_vertical");
        });
    });

    $(function () {
        $(".under25_button").click(function () {
            $(".under25_button").removeClass("active_vertical");
            $(this).addClass("active_vertical");
        });
    });

继承按钮：

<input id="Button2" class="button_vertical car_insurance_type_button" type="button" value="Halvår" />

如果有解决方案，那会对性能产生负面影响，因为每次点击都需要做更多（我认为）吗？如果是这样的话可能会更好我现在就做。

Answer 1

让按钮还有一个类'answer_button'：

<input id="Button1" class="answer_button button_vertical car_insurance_type_button" type="button" value="Halvår" /> 
<input id="Button2" class="answer_button button_vertical skadefria_ar_button" type="button" value="asdasda" />

所以，我想这会奏效：

$('.answer_button').each(function(index) {
    $('.answer_button').removeClass("button_vertical");
    $(this).addClass("button_vertical");
  });

Answer 2

如果所有按钮都在容器中，您可以在此处使用不同的方法，例如：

<div class="question">
  <input class="button_vertical car_insurance_type_button" type="button" value="Halvår" /> 
  <input class="button_vertical car_insurance_type_button" type="button" value="Halvår2" />
</div>

您可以使用一个这样的轻量级处理程序：

$(function () {
  $(".question input[type=button]").live('click', function () {
    $(this).closest(".question").find(".active_vertical").removeClass("active_vertical");
    $(this).addClass("active_vertical");
  });
});

在网络调查问卷中使用jquery添加/删除类

2 个答案: