0

При изменении div.plans-item-title должно происходить изменение в select.plans-select и отображаться нужный div.number (это сделал и работает). В какую сторону копать, что бы при изменении в select изменялись теперь ужеdivы?

$(".plans-item-title").click(function() {
  $(".plans-item-title").removeClass('active');
  $().addClass('active');

  $('.plans-items').removeClass('active');
  $($(this).attr('data-class')).addClass('active');

  $('#plans-select').val($(this).text());
});
.plans-items-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 70px;
}

.plans-item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  max-width: 15%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1rem;
  padding: 0 10px;
  color: #777;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.plans-item-title.active {
  color: #222;
  cursor: default;
  border-bottom: 1px solid #222;
}

.plans-items-title-select {
  margin-top: 50px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
}

.plans-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.plans-items {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 45px;
  margin-bottom: 45px;
  display: none;
}

.plans-items.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.plans-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.numder {
  font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plans-row row">
  <div class="plans-items-title">
    <div class="plans-item-title active" data-class=".plan-room-1">1-к</div>
    <div class="plans-item-title" data-class=".plan-room-2">2-к</div>
    <div class="plans-item-title" data-class=".plan-room-3">3-к</div>
  </div>
  <select name="plans-select" id="plans-select" class="plans-items-title-select">
    <option value="1-к" data-class=".plan-room-1">1-к</option>
    <option value="2-к" data-class=".plan-room-2">2-к</option>
    <option value="3-к" data-class=".plan-room-3">3-к</option>
  </select>
  <div id="plan-room-1" class="plans-items plan-room-1 active">
    <div class="numder">1</div>
  </div>
  <div id="plan-room-2" class="plans-items plan-room-2">
    <div class="numder">2</div>
  </div>
  <div id="plan-room-3" class="plans-items plan-room-3">
    <div class="numder">3</div>
  </div>
</div>

2 ответа 2

0

Например:

$(".plans-item-title").click(function() {
  
  var $this = $(this),
      classItem = $this.data('class'),
      plans = $('.plans-items');
  
  plans.filter('.plan-'+classItem)
  .add($this)
  .addClass('active')
  .siblings()
  .removeClass('active');

  $('#plans-select').val(classItem);
});

$('.plans-items-title-select').on('change', function() {
  var val = this.value,
      title = $('.plans-item-title'),
      plans = $('.plans-items');
  
  plans.filter('.plan-'+val)
  .addClass('active')
  .siblings()
  .removeClass('active');
  
  title.filter('.title-'+val)
  .addClass('active')
  .siblings()
  .removeClass('active');
});
.plans-items-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 70px;
}

.plans-item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  max-width: 15%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1rem;
  padding: 0 10px;
  color: #777;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.plans-item-title.active {
  color: #222;
  cursor: default;
  border-bottom: 1px solid #222;
}

.plans-items-title-select {
  margin-top: 50px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
}

.plans-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.plans-items {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 45px;
  margin-bottom: 45px;
  display: none;
}

.plans-items.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.plans-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.numder {
  font-size: 40px;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

  
<div class="plans-row row">
  
  <div class="plans-items-title">
    <div class="plans-item-title title-room-1 active" data-class="room-1">1-к</div>
    <div class="plans-item-title title-room-2" data-class="room-2">2-к</div>
    <div class="plans-item-title title-room-3" data-class="room-3">3-к</div>
  </div>
  
  <select name="plans-select" id="plans-select" class="plans-items-title-select">
    <option value="room-1" >1-к</option>
    <option value="room-2" >2-к</option>
    <option value="room-3" >3-к</option>
  </select>
  
  <div id="plan-room-1" class="plans-items plan-room-1 active">
    <div class="numder">1</div>
  </div>
  
  <div id="plan-room-2" class="plans-items plan-room-2">
    <div class="numder">2</div>
  </div>
  
  <div id="plan-room-3" class="plans-items plan-room-3">
    <div class="numder">3</div>
  </div>
  
</div>

0

$(".plans-item-title").click(function() {
  $(".plans-item-title").removeClass('active');
  $().addClass('active');

  $('.plans-items').removeClass('active');
  $($(this).attr('data-class')).addClass('active');

  $('#plans-select').val($(this).text());
});

$( "select" ).change(function() {
    var $selected = $("select#plans-select option:selected").data("class");
    $('.plans-items').each(function() {
        if($(this).hasClass($selected)) {
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    })
})
.plans-items-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 70px;
}

.plans-item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  max-width: 15%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1rem;
  padding: 0 10px;
  color: #777;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.plans-item-title.active {
  color: #222;
  cursor: default;
  border-bottom: 1px solid #222;
}

.plans-items-title-select {
  margin-top: 50px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
}

.plans-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.plans-items {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 45px;
  margin-bottom: 45px;
  display: none;
}

.plans-items.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.plans-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.numder {
  font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plans-row row">
  <div class="plans-items-title">
    <div class="plans-item-title active" data-class=".plan-room-1">1-к</div>
    <div class="plans-item-title" data-class=".plan-room-2">2-к</div>
    <div class="plans-item-title" data-class=".plan-room-3">3-к</div>
  </div>
  <select name="plans-select" id="plans-select" class="plans-items-title-select">
    <option value="1-к" data-class="plan-room-1">1-к</option>
    <option value="2-к" data-class="plan-room-2">2-к</option>
    <option value="3-к" data-class="plan-room-3">3-к</option>
  </select>
  <div id="plan-room-1" class="plans-items plan-room-1 active">
    <div class="numder">1</div>
  </div>
  <div id="plan-room-2" class="plans-items plan-room-2">
    <div class="numder">2</div>
  </div>
  <div id="plan-room-3" class="plans-items plan-room-3">
    <div class="numder">3</div>
  </div>
</div>

У option убрал точку из значение data-class.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.