Question

我正在尝试基于一些我无法控制的动态生成的无线电输入进行下拉。我有它在Codepen中工作，但是这些无线电输入不是动态生成的。我觉得我已经接近了，但是可能有一些语法问题。有什么建议吗？

jQuery：

      (function () {
          return $('.cart-dropdown-select').each(function (idx, el) {
            var $select, $trigger, $radio;
            $select = $(el);
            $trigger = $select.find('.trigger');
            $radio = $select.find(".radio");
            $select.removeClass("is-open");
            $select.on("click", function (e) {
              return $select.toggleClass("is-open");
            });
            $select.on("click", "input[name='radio']", function (e) {
              console.log($(this));
              $select.removeClass("no-selection");
              return $select.toggleClass("is-open");
              $(this).parent().addClass("checked");
            });
          });

      }).call(this);

SCSS：

.cart-dropdown-select {
  position: relative;
  display: inline-block;
  padding: 6px 24px 6px 6px;
  box-shadow: 0 0 0 1px #000;
  border-radius: 4px;

  &.no-selection {
    label:first-of-type {
      display: block;
      height: auto;
    }
    .radio:first-of-type {
      display: block;
    }
  }

  .radio, .enabled{
    display: none;
  }

  &.is-open {
    input + label {
      margin-top: 3px;
      &:first-of-type {
        margin-top: 0;
      }
      &::after {
        content: "\A";  // hack to force linebreak
        white-space: pre;
      }
    }
    .radio, .enabled{
      display: block;
    }
  }


  &.is-open input,
  &.is-open input + label,
  input:checked,
  input:checked + label, .checked{
    display: block;
    height: auto;
  }

  input,
  input + label {
    display: block;
    height: 0;
    overflow: hidden;
  }

  &::after {
    position: absolute;
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border: 6px solid #fff;
    border-top-color: blue;
    top: 11px;
    right: 6px;
    cursor: pointer;
    font-size: 9px;
    box-sizing: border-box;
  }

  input[type="radio"] {
    display: none;
    opacity: 0;
    width: 0;
    height: 0;

    + label {
      position: relative;
      color: blue;
      &:hover {
        color: grey;
        cursor: pointer;
      }
    }

    &:disabled {
      + label {
        color: blue;
        padding-left: 0;
        &::before {
          display: none;
        }
      }
    }

    &:checked {
      + label {
        color: grey;
        &::before {
          background: $pop;
        }
      }
    }
  }
}

HTML（布局示例）：

<div class='cart-dropdown-select is-open no-selection'>
     <div class="radio">
      <input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
      <label for='disabled'>Select Option</label>
  </div>

      <div class="radio">
        <input id='foo1' name='radios' type='radio' value='foo1'>
        <label for='foo1'>Foo1</label>
      </div>

      <div class="radio">
        <input id='foo2' name='radios' type='radio' value='foo2'>
        <label for='foo2'>Foo2</label>
      </div>

      <div class="radio">
        <input id='foo3' name='radios' type='radio' value='foo3'>
        <label for='foo3'>Foo3</label>
      </div>
    </div>

也是指向密码笔的链接，同样，密码笔中的此内容也不是动态驱动的，因此它在此处可以正常工作。 https://codepen.io/ascarb1/pen/LKdKjE

Answer 1

我最终改变了一些HTML，以便绑定可以发生在未动态加载的类中。这似乎奏效了。如果还有更好的解决方案，请随时留下反馈：

jQuery：

      (function () {
          return $('.cart-dropdown-select').each(function (idx, el) {
            var $select, $trigger, $radio;
            $select = $(el);
            $trigger = $select.find('.trigger');
            $radio = $(".radio");
            $select.removeClass("is-open");
            $select.on("click", function (e) {
              return $select.toggleClass("is-open");
            });
            $select.on("click", ".enabled input", function() {
              $select.toggleClass("no-selection");
              $(this).parentsUntil($radio).toggleClass("checked");
              return $select.toggleClass("is-open");
            });
          });

      }).call(this);

HTML（示例）：

<div class='cart-dropdown-select is-open no-selection'>
      <input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
      <label for='disabled'>Select Option</label>

      <div class="radio">
        <label class="enabled" for='foo1'>
          <input id='foo1' name='radios' type='radio' value='foo1'>
        Foo1</label>
      </div>

      <div class="radio">
        <label class="enabled" for='foo2'>
          <input id='foo2' name='radios' type='radio' value='foo2'>
        Foo2</label>
      </div>

      <div class="radio">
        <label class="enabled" for='foo3'>
          <input id='foo3' name='radios' type='radio' value='foo3'>
        Foo3</label>
      </div>
    </div>

SCSS不变。

单击时无法绑定动态生成的输入单选

1 个答案: