0

Подскажите, как сделать чтобы при клике на input считывался его ID, затем найден элемент div с таким же id и у этого элемента удалить класс uk-hidden

jQuery(document).ready(function($) {
  $("input").click(function() {
    var $chek = $(this).attr('id');
    $('.result div').find($chek).removeClass('uk-hidden');
    console.log($chek);
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/uikit.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uk-width-4-10">
  <input id="check1" type="radio" name="voice" value="check1" />
  <label for="check1">Вариант 1</label>
  <br />
  <input id="check2" type="radio" name="voice" value="check2" />
  <label for="check2">Вариант 2</label>
  <br />
</div>
<div class="uk-width-6-10 result">
  <div id="check1" class="uk-hidden">123</div>
  <div id="check2" class="uk-hidden">123</div>
</div>

0

2 ответа 2

4

Ваша ошибка в том, что вы используете одинаковые id на одной странице

jQuery:

$(document).ready(function($) {
  $("input").on('click', function() {
    var chek = $(this).data('id');
    $(chek).removeClass('uk-hidden');
    console.log(chek);
  });
});

HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/uikit.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uk-width-4-10">
  <input id="check1" data-id="#div1" type="radio" name="voice" value="check1" />
  <label for="check1">Вариант 1</label>
  <br />
  <input id="check2" data-id="#div2" type="radio" name="voice" value="check2" />
  <label for="check2">Вариант 2</label>
  <br />
</div>
<div class="uk-width-6-10 result">
  <div id="div1" class="uk-hidden">123</div>
  <div id="div2" class="uk-hidden">123</div>
</div>
3
$('.result div#'+$chek+'').removeClass('uk-hidden');

Это минимально необходимое исправление.

Ошибки:

1)

$('.result div').find($chek)

Селектором в скобках Вы выбираете внутри контейнера result контейнер div, и посредством find ищете ВНУТРИ этого div контейнер с id=$chek.

2) input и div имеют одинаковые id. А id в свою очередь - это уникальный идентификатор. Не к добру. Исправьте код до семантически верного, способов у Вас в Вашем случае уйма. Например:

<div class="uk-width-6-10 result">
  <div class="check1 uk-hidden">123</div>
  <div class="check2 uk-hidden">123</div>
</div>

$('.result div.'+$chek+'').removeClass('uk-hidden');

В следующий раз также возможно имеет смысл для отладки использовать toggleClass вместо removeClass. Будет видно что изменяется.

Ваш ответ

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

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