Можно ли, используя jquery, нацеливаться на все элементы определенного класса в родительском div кнопки, которая вызывает событие?

Question

В идеале я хотел бы иметь возможность сделать событие целевым для всех p.hiddeninput, которые также не имеют определенного класса ("." + This.id + "Y") в родительском div переключателей , Я попытался использовать селектор .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(){
  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') найдет все скрытые входные различия. И после этого вы будете переключать видимость каждого из них в зависимости от их идентификаторов.

В этом случае предпочтительнее, чем вручную выбирать все элементы, которые должны отображаться, и скрывать остальные.

p.s. другой способ просто сделать:

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

Где вы будете скрывать все элементы, а затем просто покажете уникальный идентификатор один.

Answer 3

Вы имели в виду, как это?

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