Question

现在我有一个自举行设置，其中包含一个复选框和输入。

<div class="row">
<div class="AdminFees">
    <div class="col-md-2"><input type="checkbox" class="make-switch feeswitch" data-on-color="info" data-off-color="info" data-on-text="Yes" data-off-text="No" name="HasPerMemberFee" checked="@Model.Contract.HasPerMemberFee" /></div>
</div>
<div class="col-md-2"><input type="text" class="form-control" placeholder="$0.00" id="PerMemberFeeAmount" name="PerMemberFeeAmount" value="@Model.Contract.PerMemberFeeAmount" /></div>

我有6或7个非常相同的字段对，我一直在操作，所以我不需要创建多个函数。我无法弄清楚如何从复选框元素中引用文本输入元素。

Jquery的：

$('.feeswitch').each(function () {
    $(this).on('switchChange.bootstrapSwitch', function () {
        if ($(this).bootstrapSwitch('state') == true)
            $(this).next('input').css('visibility', 'visible');
        else
            $(this).next('input').css('visibility', 'hidden');
    });
});

我尝试过next和nextAll，但据我了解，那些只能找到子元素。我需要知道如何选择第二个相邻父元素的子元素。

试图简化情况：

该复选框有2个父项，两个div和1个相邻元素，另一个div列。我需要访问那个其他div列的子节点，但它需要一般，所以我不需要为我页面上的每个复选框/输入对制作8个函数。

Answer 1

我不确定我是否同意所接受的解决方案是稳定的，因为它的选择器在很大程度上取决于保持您的结构相同，我认为这在大多数项目中是不可能的。如果我可以提出替代方案，我认为这里更好的方法是使用选择器的scope参数。

$('.feeswitch').on('switchChange.bootstrapSwitch', function () {
    var switchState = $(this).bootstrapSwitch('state') ? "visible" : "hidden";
    $('input',$(this).closest('.row')).not($(this)).css('visibility', switchState);
});

无论如何，你应该更多地了解jQuery DOM遍历方法，因为这几乎是jQuery的神奇之处：

https://api.jquery.com/category/traversing/

Answer 2

你想说的话是：

$(this).parent().parent().next('div').find('input').
  css('visibility', 'visible');

由于此是通用的，因此您不需要each()：

$('.feeswitch').on('switchChange.bootstrapSwitch', 
  function () {
    var visi = $(this).bootstrapSwitch('state') ? 'visible' : 'hidden';

    $(this).parent().parent().next('div').find('input').
      css('visibility', visi);
  }
);

在Jquery中选择相邻父元素的子元素

2 个答案: