1

Помогите пожалуйста оживить блоки. Как через ajax передать те, что я выделил ?

$('.phone').click(function(){
$(this).toggleClass('on');
});

$('.month').click(function(){
$(this).toggleClass('on');
});
.phone, .month  {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  width: 120px;
  text-align: center;
  position: relative;
}

.on::after {
  position: absolute;
  bottom: 0;
  left: 10px;
  content: '•';
}

.phone{
  background-color: #191919;
}

.month {
  background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phones-wrap">
  <div class="phone nokia">nokia</div>
  <div class="phone xiaomi">xiaomi</div>
  <div class="phone iphone">iphone</div>
</div>
<br>
<div class="credit-wrap">
  <div class="month one">one</div>
  <div class="month two">two</div>
  <div class="month three">three</div>
</div>

1 ответ 1

2

К примеру можно перебрать все элементы через each и собрать данные с каждого:

$(document).on('click', '.phone', function() {
  $(this).toggleClass('on');
});

$(document).on('click', '.month', function() {
  // $('.credit-wrap').find('.month').attr('class', 'month'); // Если хотим чтобы месяц выбирался лишь один
  $(this).toggleClass('on');
});

$(document).on('click', '#submit', function() {
  var data = [];
  $('.container .on').each(function() {
    data[data.length] = $(this).data('value');
  });
  
  console.log(data); // получаем массив

  $.ajax({
    url: '/temp.php',
    type: 'POST',
    data: data
  }).done(function(res) {
    alert('Данные успешно обработаны.');
    $('.container .on').removeClass('on');
  }).fail(function(err) {
    alert('Произошла ошибка.');
    console.log(err);
  });  
})
.phone, .month  {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  width: 120px;
  text-align: center;
  position: relative;
}

.on::after {
  position: absolute;
  bottom: 0;
  left: 10px;
  content: '•';
}

.phone {
  background-color: #191919;
}

.month {
  background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="phones-wrap">
    <div class="phone" data-value="nokia">nokia</div>
    <div class="phone" data-value="xiaomi">xiaomi</div>
    <div class="phone" data-value="iphone">iphone</div>
  </div>

  <div class="credit-wrap">
    <div class="month" data-value="one">one</div>
    <div class="month" data-value="two">two</div>
    <div class="month" data-value="three">three</div>
  </div>
</div>
  
<button type="button" id="submit">Отправить</button>

4
  • 1
    А чтобы не было дуближа в <div class="phone" data-value="nokia">nokia</div> можно просто написать <div class="phone">nokia</div> и тогда в each брать текст: data[data.length] = $(this).text();
    – RifmaMan
    30 мая 2018 в 9:07
  • Спасибо огромное. А как еще сделать, чтобы выбирать можно было только один месяц ? 30 мая 2018 в 9:20
  • 1
    @RickHangover допишите 1 строку в начале события клика по месяцу: $('.credit-wrap').find('.month').attr('class', 'month');
    – RifmaMan
    30 мая 2018 в 9:22
  • Премного благодарствую! 30 мая 2018 в 9:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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