Как обработать события click правильно?

250

15 марта 2019, 21:20

В блоке два одинаковых элемента, нужно обработать события клика так чтобы dropdown открывался только у элемента на который кликнули

$(document) 
  .on('click', '.b-calc__group-input_right', e => { 
    e.preventDefault(); 
    $('.b-calc__dropdown').addClass('b-calc__dropdown_open'); 
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="b-calc__group"> 
  <div class="b-calc__group-input b-calc__group-input_left"> 
    <label class="b-calc__label" for="val">You pay</label> 
    <input class="b-calc__input" name="val" type="text" placeholder="100"> 
  </div> 
  <div class="b-calc__group-input b-calc__group-input_right"> 
    <div class="b-calc__currency"> 
      <i class="cc BTC-alt b-calc__icon"></i> EUR 
    </div> 
  </div> 
  <div class="b-calc__dropdown"> 
    <div class="b-calc__topline"> 
      <div class="b-calc__search-icon"></div> 
      <input class="b-calc__dropdown-input" name="val" type="text" placeholder="Type a currency"> 
      <a href="#" class="b-calc__closed"></a> 
    </div> 
    <a href="#" class="b-calc__link b-calc__link_eur"><i class="cc BTC-alt b-calc__link-icon"></i>EUR Euro</a> 
    <a href="#" class="b-calc__link b-calc__link_usd"><i class="cc BTC-alt b-calc__link-icon"></i>USD Dollar</a> 
  </div> 
</div> 
 
<div class="b-calc__group"> 
  <div class="b-calc__group-input b-calc__group-input_left"> 
    <label class="b-calc__label" for="val-other">You get</label> 
    <input class="b-calc__input" name="val-other" type="text" placeholder="100"> 
  </div> 
  <div class="b-calc__group-input b-calc__group-input_right"> 
    <div class="b-calc__currency"> 
      <i class="cc BTC-alt b-calc__icon"></i> BIT 
    </div> 
  </div> 
  <div class="b-calc__dropdown"> 
    <div class="b-calc__topline"> 
      <div class="b-calc__search-icon"></div> 
      <input class="b-calc__dropdown-input" name="val" type="text" placeholder="Type a currency"> 
      <a href="#" class="b-calc__closed"></a> 
    </div> 
    <a href="#" class="b-calc__link b-calc__link_eur"><i class="cc BTC-alt b-calc__link-icon"></i>EUR Euro</a> 
    <a href="#" class="b-calc__link b-calc__link_usd"><i class="cc BTC-alt b-calc__link-icon"></i>USD Dollar</a> 
  </div> 
</div>

Answer 1

если у тебя первый соответствует левому второй правому то для правого:

$(document)
  .on('click', '.b-calc__group-input_right', e => {
    e.preventDefault();
    $('.b-calc__dropdown').eq(1).addClass('b-calc__dropdown_open');
  });

для левого:

$(document)
  .on('click', '.b-calc__group-input_left', e => {
    e.preventDefault();
    $('.b-calc__dropdown').eq(0).addClass('b-calc__dropdown_open');
  });