Повторное использование id в функции

193
22 декабря 2018, 19:30

Помогите, пожалуйста, разобраться с jQuery:

Радиокнопки 1 и 2 используют картинку с одинаковым id, но при этом должны открывать блоки с разным текстом. http://jsfiddle.net/54tsowq7/5/

В моем случае кнопка 1 не подгружает картинку, а вторая работает нормально. В чем может быть проблема и как ее исправить?

$(document).ready(function() { 
   $('.radiobuttons').change(function() { 
    if ($('#item1').prop('checked')) { 
        $('#pic2, #text1').show(); 
    } else { 
        $('#pic2, #text1').hide(); 
    } 
      if ($('#item2').prop('checked')) { 
        $('#pic2, #text2').show(); 
    } else { 
        $('#pic2, #text2').hide(); 
    } 
     if ($('#item3').prop('checked')) { 
        $('#pic3, #text3').show(); 
    } else { 
        $('#pic3, #text3').hide(); 
    } 
}); 
});
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <link href="style.css" rel="stylesheet"> 
    <title>Title</title> 
</head> 
 
<body> 
    <div class="container"> 
        <div class="image-wrap"> 
        <div class="image"> 
            <div class="img1" id="pic1"><img src="img/main_v3-38.png" alt=""></div> 
            <div class="img2" id="pic2" style='display:none'><img src="http://images.math.cnrs.fr/IMG/png/section8-image.png" alt=""></div> 
            <div class="img3" id="pic3" style='display:none'><img src="http://www.simpleimageresizer.com/static/images/simple-image-resizer-128x128.png" alt=""></div> 
        </div> 
        </div> 
        <div class="radio"> 
<form class="radiobuttons"> 
  <p id="desc1"><input type="radio" name="item1" id="item1" value="1">Текст 1</p> 
  <p id="desc2"><input type="radio" name="item1" id="item2" value="1">Текст 2</p> 
  <p id="desc3"><input type="radio" name="item1" id="item3" value="1">Текст 3</p> 
   
</form> 
        </div> 
    </div> 
    <div class="text" id="text1" style='display:none'>Lorem Ipsum Text1</div> 
    <div class="text" id="text2" style='display:none'>Lorem Ipsum Text2</div> 
    <div class="text" id="text3" style='display:none'>Lorem Ipsum Text3</div> 
<div class="image-wrap"> 
        <div class="image"> 
            <div class="img1" id="pic1"><img src="img/main_v3-38.png" alt=""></div> 
            <div class="img2" id="pic2" style='display:none'><img src="img/main_v3-41.png" alt=""></div> 
            <div class="img3" id="pic3" style='display:none'><img src="img/main_v3-44.png" alt=""></div> 
        </div> 
        </div> 
 
</body> 
 
</html>

Answer 1

Потому что ты используешь один id. Первое условие не срабатывает, т.к. во второй проверки у тебя этот же id скрывается. Вставь рабочую картинку в #pic1 и 

    $(document).ready(function() {
   $('.radiobuttons').change(function() {
    if ($('#item1').prop('checked')) {
        $('#pic1, #text1').show();
    } else {
        $('#pic1, #text1').hide();
    }
      if ($('#item2').prop('checked')) {
        $('#pic2, #text2').show();
    } else {
        $('#pic2, #text2').hide();
    }
     if ($('#item3').prop('checked')) {
        $('#pic3, #text3').show();
    } else {
        $('#pic3, #text3').hide();
    }
});
});
Answer 2

Если прям очень надо использовать только один и тот же ID, сделай так: http://jsfiddle.net/54tsowq7/196/

   $(document).ready(function() {
   $('.radiobuttons').change(function() {
   $('.img2, .img3, .text').hide();
   if ($('#item1').prop('checked')) {
        $('.img2, #text1').show();
    }
    if ($('#item2').prop('checked') ) {
        $('.img2, #text2').show();
    } 
     if ($('#item3').prop('checked')) {
        $('#pic3, #text3').show();
    }
});
});
READ ALSO
Авторизация на spaces.ru
javascript

Авторизация на spaces.ru

Пытаюсь реализовать авторизацию на http://spacesru через скрытый WebView

 183
Задача по JavaScript с DOM элементами?
javascript

Задача по JavaScript с DOM элементами?

помогите решить простую задачу, я вроде и сам решил но не понимаю что не правильно)

 174
Нужно описывать типы данных в классе, после интерфейса?
javascript

Нужно описывать типы данных в классе, после интерфейса?

Класс Calculator имплементируется от ICalculator, где описаны все методы и их типы, стоит ли повторно это делать для параметров методов класса ? Если...

 154
Прочитать файл c кириллицей и отобразить на html странице [дубликат]
javascript

Прочитать файл c кириллицей и отобразить на html странице [дубликат]

На данный вопрос уже ответили:

 139