是否可以使用jquery定位調用事件的按鈕的父div內特定類的所有元素？

Question

理想情況下，我希望能夠使事件以所有p.hiddeninput為目標，在單選按鈕的父div內也沒有特定的（“。” + this.id +“ Y”）類。 我嘗試使用.parent（）選擇器，但未成功。

我遇到的情況是需要設置5個單選按鈕，其中的4個在單擊時需要顯示特定的隱藏輸入。 價格表和補充單選按鈕都需要打開相同的輸入。 發生這種情況時，任何以前打開的輸入也需要隱藏。 目前，我有看起來像這樣的html，

<input value="auto" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradiomarkdown">Markdown</input>
<input value="pricetable" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradiopricetable">Price table</input>
<input value="fromsupplement" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradiofromsupplement">From supplement</input>
<input value="discount" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradiodiscount">Discount</input>
<input value="noprice" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradionoprice">No price</input>


<p style="display:none" class="buypricebyradiopricetableY buypricebyradiofromsupplementY hiddeninput"><label for="buyingpricetable">Buying price table:</label><input class="medium include search" id="buyingpricetablesearch"></input></p>
<p style="display:none" class="buypricebyradiomarkdownY hiddeninput"><label for="markdownstyle">Mark down style:</label><input class="medium include search" id="markdownstylesearch"></input></p>
<p style="display:none" class="buypricebyradiodiscountY hiddeninput"><label for="buydiscountstyle">Discount style:</label><input class="medium include search" id="buydiscountstylesearch"></input></p>

用一個jscript命令

$('.oneofmany').click(function(){     
      $("p.hiddeninput").not("." + this.id + "Y").hide();   
      $('.' + this.id + "Y").show();
}); 

對於一組單選按鈕和輸入來說，這很好用。 但是，我需要有多個集合，在這種情況下，當在一組輸入中單擊單選按鈕時，它也會關閉其他部分中的所有輸入。

是否可以針對這樣的事件，如果沒有人可以建議解決此問題？ 感謝您的時間。

Answer 1

在調用事件的按鈕的父div內定位特定類的所有元素？

$(this).parent('div').find('.specific-class')

Answer 2

你是這個意思嗎

$('.oneofmany').click(function(){     
      $(this).parent('div').find("p.hiddeninput").not("." + this.id + "Y").hide();   
      $(this).parent('div').find('.' + this.id + "Y").show();
}); 

Answer 3

我認為就您而言，最好只寫：

$('.oneofmany').click(function(){
  var targetId = this.id + 'Y';

  $(this).parent('div').find("p.hiddeninput").each(function(){
    $(this).toggle(this.id == targetId);
  });
});

$(this).parent('div')將遍歷元素的父級，直到找到“ div”為止。 然后.find('p.hiddeninput')將找到所有的hiddeninput差異。 之后，您將根據其ID切換每個視圖的可見性。

更好的方法是手動選擇所有必須顯示的元素，然后隱藏其余元素。

ps的另一種方法是：

$('.oneofmany').click(function(){
 $(this).parent('div').find("p.hiddeninput").hide();
 $('#' + this.id + 'Y').show();
});

您將在其中隱藏所有元素的地方，然后僅顯示唯一的id一。