Question

我得到以下我无法控制的HTML：

<div class="form-wrap">
      <div class='input-wrap' data-field='start-set'>
             <input type='radio' name='participant[0][start-set][value]' value='Information centre' class='participant-form--input-radio'/>
             <span>Information centre</span>

             <input type='radio' name='participant[0][start-set][value]' value='Terminal' class='participant-form--input-radio'/>
             <span>Terminal<span>
     </div>
     <div class='input-wrap' data-field='delivery'>
         ...
     </div>
</div>

对于不同的参与者，这可能会在同一页面中重复多次。

需要做的是捕获radio input更改，如果无线电值是＆＃39;终端＆＃39;，则显示带有data-field='delivery'的同级div。

我在前端非常糟糕，所以非常感谢任何帮助或指导。

Answer 1

您可以使用树traversal#next()方法

$("input[type='radio'].participant-form--input-radio").on('change', function() {

    var currentRadio = $(this);
    if (currentRadio.val() == "terminal") {

        currentRadio.parent().next().show();
    }
})

Answer 2

首先，您需要将更改事件绑定到单选按钮，我已使用名称以...开头选择器。

$('input[name^=participant]').on('change', function() {

替代方案是：

$('input:radio') /* all radiobuttons */
$('.form-wrap input:radio') /* all radiobuttons inside .form-wrap */
$('.participant-form--input-radio') /* class selector */

之后我们需要找到我们想要显示和隐藏的元素。我更喜欢将树向上移动到父元素并找到我们正在寻找的孩子

$(this).closest('.form-wrap').find('[data-field="delivery"]')

然后我使用toggle(statement)隐藏或显示它。在这种情况下的陈述将是＆＃34;值＆＃39;终端＆＃39;＆＃34;

.toggle( $(this).val() == 'Terminal' )

总之，它看起来像这样：

＆＃13;

$(function() {
  $('input[name^=participant]').on('change', function() {
    $(this).closest('.form-wrap').find('[data-field="delivery"]').toggle( $(this).val() == 'Terminal' );
  });
});

＆＃13;

[data-field="delivery"] { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-wrap">
  <div class='input-wrap' data-field='start-set'>
    <input type='radio' name='participant[0][start-set][value]' value='Information centre' class='participant-form--input-radio' />
    <span>Information centre</span>

    <input type='radio' name='participant[0][start-set][value]' value='Terminal' class='participant-form--input-radio' />
    <span>Terminal</span>
  </div>
  <div class='input-wrap' data-field='delivery'>
    ...
  </div>
</div>

＆＃13;

Answer 3

$('input[type=radio]').change(function() {
  if ($(this).val() == 'Terminal') {
    $(this).parents('.input-wrap').next('[data-field=delivery]').show();
  } else {
    $(this).parents('.input-wrap').next('[data-field=delivery]').hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-wrap">
  <div class='input-wrap' data-field='start-set'>
    <input type='radio' name='participant[0][start-set][value]' value='Information centre' class='participant-form--input-radio' />
    <span>Information centre</span>

    <input type='radio' name='participant[0][start-set][value]' value='Terminal' class='participant-form--input-radio' />
    <span>Terminal<span>
     </div>
     <div class='input-wrap' data-field='delivery' style="display:none;">
         ... 
     </div>
</div>

div中的jQuery目标元素只有唯一的数据字段

3 个答案: