Question

我有3个同名的盒子，如果我点击.fonarcom jquery隐藏所有.pagamento`。

有一种方法只隐藏父容器中的.pagamento吗？

var j = jQuery.noConflict();

j(".fonarcom").click(function() {
    if (j(this).is(':checked')) {
        j(".pagamento").hide();
    } else {
        j(".pagamento").show();
    };
});

HTML：

<div class="large-6 columns ">
    <label><input name="fonarcom" class="fonarcom" type="checkbox" value="SI"> L'azienda aderisce a FonarCom</label>
</div>


<div class="large-6 columns pagamento">
    <label>Modalità di pagamento</label>
    <select name="pagamento" required>
    <option value="">Seleziona un metodo di pagamento</option>
    <option value="Contanti/Assegno Inizio Corso">Contanti/Assegno Inizio Corso</option>
    <option value="Bonifico Anticipato">Bonifico Anticipato</option>
    </select>
</div>

Answer 1

首先你需要父容器，所以我做了一个div包装器（但我想你已经有了一个）

<div class="wrapper">
   <div class="large-6 columns ">
      <label><input name="fonarcom" class="fonarcom" type="checkbox" value="SI"> L'azienda aderisce a FonarCom</label>
   </div>

   <div class="large-6 columns pagamento">
      <label>Modalità di pagamento</label>
      <select name="pagamento" required>
         <option value="">Seleziona un metodo di pagamento</option>
         <option value="Contanti/Assegno Inizio Corso">Contanti/Assegno Inizio Corso</option>
         <option value="Bonifico Anticipato">Bonifico Anticipato</option>
      </select>
   </div>
</div>
<div class="wrapper">
       <div class="large-6 columns ">
           ...

然后在jQuery中选择容器并找到正确的 .pagamento

if( j(this).is(':checked') ) {
   j(this).closest(".wrapper").find(".pagamento").hide();
} else {
   j(this).closest(".wrapper").find(".pagamento").show();  
};

请参阅此处的工作示例：FIDDLE

Answer 2

由于pagamento是fonarcom的父div元素的兄弟。您可以使用closest()遍历div，然后使用.next()查找以下兄弟。

var j = jQuery.noConflict();

j(".fonarcom").click(function() {
    j(this).closest('div').next(".pagamento").toggle(this.checked);
});

在这里，我使用了.toggle(display)

使用true显示元素，或false隐藏它。

仅删除父元素jquery

2 个答案: