1

Есть блок с input как на картинке ниже. Оно нужно для выбора альбома, для последующей загрузки картинок в этот альбом. При выборе ( Нажатии на input radio ) выводиться текст описания альбома.
Так вот, в добавленном коде, выводиться div как нужно, но с одним нюансом. При выборе, старые div-ы не закрываются. Нужно подправить имеющийся код так, чтобы при выборе альбома, старое описание закрывалось и новое появлялось.
Понятно описал?
В итоге, нужен код который закрывает div у того блока, у которого убирается checked.


Пример:

Пример

    <script type="text/javascript">
    $(document).ready(function(){
    show("bloggood1", "cat1","$_GET[a]");
    });
      function show(bloggood, cat, id){
        bloggood = document.getElementById(bloggood);
        cat = document.getElementById(cat);
    	albom = document.getElementById('albom_vibor');
        if (bloggood.checked){
    		albom_vibor.value = id;
    		cat.style.display = "block";	
    	}else{ 
    		albom_vibor.value = '';
    		cat.style.display = "none";
    	};
      };
    </script>
    <div class='addimage-albom-box'>
    <input type='radio' name='bloggood' class="radio" id="bloggood$albom[id]" onchange='show("bloggood$albom[id]","cat$albom[id]","$albom[id]");'/>
    <label for='bloggood$albom[id]'>$albom[title]</label>
    <div id='cat$albom[id]' class='addimage-albom-box-opisanie'>
$albom[opisanie]
    	<small>Вы выбрали этот альбом. Теперь Вы можете загрузить картинку в него.</small>
    </div>
    </div>

13
  • А что у вас не получилось? Можно увидеть вашу попытку что-то сделать? Или вам все с нуля сделать? 18 июл 2016 в 5:54
  • У меня на jsfiddle есть пример с инпутами checked, спокойно можно переделать под radio. Остальное делается очень просто, скрыть нужный div или показать его при активном инпуте
    – Doofy
    18 июл 2016 в 6:00
  • У меня показывает div в выбранном radio, но не убирает с других. if (bloggood.checked){cat.style.display = "block";} Делаю через присваивание css. 18 июл 2016 в 7:57
  • Ну что? Вопрос актуален, было бы круто, если бы Вы скинули готовый код своей версии... 18 июл 2016 в 9:06
  • 3
    @АльбертУшаков тут не делают задания за вас..... зато за вас сделают задание на фрилансе 18 июл 2016 в 9:23

2 ответа 2

1

$('input[type=radio]').change(function() {
    var thisDescription = $(this).parent().find('.addimage-albom-box-opisanie');
    thisDescription.slideDown();
    $('.addimage-albom-box-opisanie').not(thisDescription).slideUp();
});
.addimage-albom-box-opisanie {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='addimage-albom-box'>
  <input type='radio' name='r' id="r1" />
  <label for='r1'>Radio 1</label>
  <div class='addimage-albom-box-opisanie'>
    <small>Вы выбрали этот альбом. Теперь Вы можете загрузить картинку в него.</small>
  </div>
</div>
<div class='addimage-albom-box'>
  <input type='radio' name='r' id="r2" />
  <label for='r1'>Radio 2</label>
  <div class='addimage-albom-box-opisanie'>
    <small>Вы выбрали этот альбом. Теперь Вы можете загрузить картинку в него.</small>
  </div>
</div>
<div class='addimage-albom-box'>
  <input type='radio' name='r' id="r3" />
  <label for='r1'>Radio 3</label>
  <div class='addimage-albom-box-opisanie'>
    <small>Вы выбрали этот альбом. Теперь Вы можете загрузить картинку в него.</small>
  </div>
</div>

1

как-то так. либо js чистом либо с jquery.

//$(".addimage-albom-box-opisanie").prop("hidden", true);

//$("[name=bloggood]").change(function(){
// var id = $(this).attr("data-id");
//  console.log(id);
//  $(".addimage-albom-box-opisanie").prop("hidden", true);
//  $("#" + id).prop("hidden", false);
//})
.addimage-albom-box-opisanie {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function foo(item) {
    var id = item.getAttribute("data-id");
    console.log(id);
    var x = document.getElementsByClassName("addimage-albom-box-opisanie");
    var i;
    for (i = 0; i < x.length; i++) {
      if (i == id - 1) {

        x[i].style.display = "block";
      } else {
        x[i].style.display = "none";
      }
    }
  };




</script>

<div class='addimage-albom-box'>
  <input type='radio' name='bloggood' class="radio" id="radio1" data-id="1" onchange='foo(this);' />
  <label for='bloggood$albom[id]'>radio1</label>
  <div id='1' class='addimage-albom-box-opisanie'>
    <small>Вы выбрали этот альбом. Теперь Вы можете загрузить картинку в него.</small>
  </div>
  <br>
  <input type='radio' name='bloggood' class="radio" id="radio2" data-id="2" onchange='foo(this);' />
  <label for='bloggood$albom[id]'>radio2</label>
  <div id='2' class='addimage-albom-box-opisanie'>
    <small>Вы выбрали этот альбом. Теперь Вы можете загрузить картинку в него.</small>
  </div>
  <br>
  <input type='radio' name='bloggood' class="radio" id="radio3" data-id="3" onchange='foo(this);' />
  <label for='bloggood$albom[id]'>radio3</label>
  <div id='3' class='addimage-albom-box-opisanie'>
    <small>Вы выбрали этот альбом. Теперь Вы можете загрузить картинку в него.</small>
  </div>
</div>

1

Ваш ответ

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

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