Работа с одинаковыми классами js

176

13 ноября 2018, 18:40

$(".select_box").click(function () { 
    $(this).children('.option_box').toggleClass('open'); 
}); 
$('.select_box .option').click(function() { 
    var num = $(this).text(); 
    $('.input_val').val(num); 
    $('.number_val').html(num); 
});

.select_box { 
  position: reletiv; 
} 
.option_box { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background-color: #ccc; 
    width: 100%; 
    list-style-type: none; 
    padding: 0; 
    margin-bottom: 0; 
    z-index: 10; 
    max-height: 0; 
    transition: max-height 0.5s ease-out; 
    overflow: hidden; 
} 
.option_box.open { 
    max-height: 300px; 
    transition: max-height 0.8s ease-in; 
} 
.value_tag { 
    min-height: 45px; 
    padding: 0 15px; 
    cursor: pointer; 
} 
.option_box li { 
    padding: 4px 15px; 
    box-sizing: content-box; 
    cursor: pointer; 
} 
.option_box li:hover { 
    background-color: rgba(38, 182, 255, 0.5); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
<div class="select_box"> 
    <div class="value_tag"> 
        <span class="number_val">1</span> 
        <input class="input_val" type="hidden"  value=""> 
    </div> 
    <ul class="option_box"> 
      <li class="option">1</li> 
      <li class="option">2</li> 
    </ul> 
</div> 
<div class="select_box"> 
    <div class="value_tag"> 
        <span class="number_val">1</span> 
        <input class="input_val" type="hidden"  value=""> 
    </div> 
    <ul class="option_box"> 
      <li class="option">1</li> 
      <li class="option">2</li> 
      <li class="option">3</li> 
      <li class="option">4</li> 
    </ul> 
</div>

Не получается реализовать следующую задачу: при клике на li с классом option мне нужно что бы подставились значения только в этот div.

Answer 1

https://api.jquery.com/closest/

$('.select_box .option').click(function() {
    var num = $(this).text();
    $(this).closest('.select_box').find('.input_val').val(num);
    $(this).closest('.select_box').find('.number_val').html(num);
});