Question

我正在将formslider library用于我网站上的一种表单，就像demo一样，幻灯片会根据任意单选按钮（答案）的点击事件移至下一组问题。

现在，当我尝试添加复选框以使人们从表单中选择多个选项时，它将不起作用。当您单击复选框时，会发生什么情况，而不是将滑块转到下一张幻灯片，而不是等待用户选择所有滑块，然后单击继续（输入按钮类型）

我注意到该库中的功能之一是 NavigateOnClick 。这是其代码。

JS代码

this.NavigateOnClick = (function(i) {
  function n() {
     return this.onClick = r(this.('input[type="radio"]').onClick, this), this.init = r(this.init, this), n.__super__.constructor.apply(this, arguments)
  }
  return (
    o(n, i),
    (n.config = {
      actions: [
        {
          selector: ".answer",
          action: "next",
          wait: 200
        },
        {
          selector: ".next-button",
          action: "next",
          wait: 10
        },
        {
          selector: ".prev-button",
          action: "prev",
          wait: 10
        }
      ]
    }),
    (n.prototype.init = function() {
      var i, n, e, r, o;
      for (o = this.config.actions, e = 0, r = o.length; e < r; e++)
        (n = o[e]),
          (i = t(n.selector, this.container)),
          i.on("mouseup", n, this.onClick);
    }),
    (n.prototype.onClick = function(t, i) {
      if ((t.preventDefault(), !this.timeout))
        return (this.timeout = setTimeout(
          (function(i) {
            return function() {
              return i.formslider[t.data.action].call(), (i.timeout = null);
            };
          })(this),
          t.data.wait
        ));
    }),
    n
  );
})(AbstractFormsliderPlugin);

我尝试将输入类型附加到 this.onClick ，但这不起作用。请注意，它如何选择课程 .answer

要更清楚地了解表单的外观，下面是我的HTML的摘录

HTML代码

<div class="slide" data-role="question" data-id="9">
    <div class="headline">Choose all of the correct options</div>
    <input type="hidden" name="slides[8][question]" value="">
    <div class="answers">
        <div class="answer" data-next-id="5">
            <label class="inner-answer" for="slides[8][answer]">
                <input id="question_8_answer_" name="slides[8][answer]" value="option 1" type="checkbox">
                <div class="text">Option 1</div>
            </label>
        </div>
    </div>
</div>

我要实现的目标是使它仅在单击输入类型单选按钮和按钮时导航，或者相反，而不是在单击输入类型复选框和文本时导航。

Answer 1

我认为n.config对象中的操作会选择代码的功能，您有一个带有选择器“ .answer”的操作，因此任何类为answer的div都会触发next的操作。

将".answer"选择器更改为'input[type="radio"]'可能会解决您的问题。

如何使onClick JS功能仅在单选按钮上起作用

1 个答案: