Question

请先查看上图。

此任务的目的是能够使用自定义数据属性显示/隐藏容器，以及是否选中/取消选中单选按钮。

以下是我们如何使用它;

<ul class="radio group">
<li><input name="radio-1" type="radio" value="1">Motorbike</li>
<li><input name="radio-1" type="radio" value="2">Car</li>
<!-- THIS IS OUR TRIGGER -->
<li><input name="radio-1" type="radio" value="3" data-toggle="expand" data-toggle-target=".container">Other</li>
</ul>

<!-- THIS SHOULD BE HIDDEN, IF NOT THEN WE SET IT TO BE HIDDEN ON PAGE LOAD -->
<div class="container">
<!-- SOME CONTEXT -->
</div>

上面的代码展示了我们如何在HTML标记中使用自定义数据属性来执行此操作，当您单击所需的单选按钮时，它可以正常工作，但是当单击其他单选按钮时，应该取消选中活动按钮因为我们点击了其他单选按钮，然后容器应该显示出来，但它没有完全正常工作。

请查看我的jsFiddle版本！

非常感谢任何帮助：）

Answer 1

这是一个解决方案......

https://jsfiddle.net/Farzad/xtwquh7a/

以下是整个代码已改变的部分内容;

// IF RADIO BUTTON
  if (_triggerType == 'radio') {

                $('[name="' + _$trigger.attr('name') + '"]').each(function () {

        if ($(this).val() != _$trigger.val())
        {
                        $(this).change(function(event, source){
            if(source != _$trigger.val())
                if(source === undefined)
                _$trigger.trigger("change", _$trigger.val());
              else  
                _$trigger.trigger("change", source);    
          })
        }
      });

    _$trigger.change(function () {
      // CHECKED
      if (this.checked) {
        expandIt(_$target);

        // UNCHECKED
      } else if (!this.checked) {
        collapseIt(_$target);
      }
    });
    }

在挖掘并花费了大量时间之后，我的朋友 Mihir Solanki 带来了一个绝对完美的解决方案！再次非常感谢Mihir：）

希望这也有助于其他人，以前可能遇到过类似的任务！

由于

使用基于已选中/未选中的单选按钮的自定义数据属性显示/隐藏容器

1 个答案: