Форум

tupoimudak2 · #1 (**permalink**) 16.06.2017, 21:34

Есть группа элементов(кнопок), при клике на один из них, должны скрываться все остальные, кроме того на который кликнули.
Хотел реализовать так: есть массив со всеми нужными элементами.При клике на один из них с помощью OnClick="Function`s_name(Button`s name)" вызывается функция которая из массива убирает элемент, имя которого указанно в аргументе. После чего скрывает все элементы,которые остались в массиве.
Но, так как в JS я новичок, код, написанный мной успешно не работает, в консоле ошибок нет.
Сам код:
Кнопки на HTML

<button class="circle p" OnClick="hiding(p);">Predators</button>
	 <button class="circle s" OnClick="hiding(s);">Shrubs</button>
	 <button class="circle d" OnClick="hiding(d);">Donate</button>
	 <button class="circle t" OnClick="hiding(t);">Trees</button>
	 <button class="circle h" OnClick="hiding(h);">Hebivores</button>
	 <button class="circle v" OnClick="hiding(v);">Vacancies</button>
	 <button class="circle f" OnClick="hiding(f);">Flowers</button>
	 <button class="circle w" OnClick="hiding(w);">Workers</button>
	 <button class="circle i" OnClick="hiding(i);">Info</button>

var all = ['#p','#s','#d','#t','#h','#v','#f','#w','#i'];//массив с id элементов
var deletethis;//то,что нужно удалить
function hiding(hidethis) {
	var hidethat = "#"+ hidethis; // добавляем # к тому, что получили в виде аргумента
	var deletethis = arr.indexOf(hidethat); // вычисляем номер нужного элемента в массиве
	arr.splice(deletethis,deletethis); // удаляем его
	$(all).hide(); // скрываем все, что осталось
}

j0hnik · #2 (**permalink**) 16.06.2017, 21:54

если с jquery то так я бы так сделал

<head>
	<meta charset="utf-8">
</head>
<body>
	<button class="circle p">Predators</button>
	<button class="circle s">Shrubs</button>
	<button class="circle d">Donate</button>
	<button class="circle t">Trees</button>
	<button class="circle h">Hebivores</button>
	<button class="circle v">Vacancies</button>
	<button class="circle f">Flowers</button>
	<button class="circle w">Workers</button>
	<button class="circle i">Info</button>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
$(".circle").click(function(){
$(this).siblings(".circle").hide();
});
</script>
</body>

рони · #3 (**permalink**) 16.06.2017, 21:59

tupoimudak2,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
    $(function() {
    var b = $(".circle");
  b.on("click",function() {
   b.not(this).hide()
})
});
  </script>
</head>

<body>
     <button class="circle p" >Predators</button>
	 <button class="circle s" >Shrubs</button>
	 <button class="circle d" >Donate</button>
	 <button class="circle t" >Trees</button>
	 <button class="circle h" >Hebivores</button>
	 <button class="circle v" >Vacancies</button>
	 <button class="circle f" >Flowers</button>
	 <button class="circle w" >Workers</button>
	 <button class="circle i" >Info</button>
</body>
</html>

j0hnik · #4 (**permalink**) 16.06.2017, 22:17

Рони, друг мой, а почему вы все время этот "1.12.4" jquery подключаете ?

j0hnik · #5 (**permalink**) 16.06.2017, 22:26

на всякий случай на Vanilla.js

<head>
	<meta charset="utf-8">
</head>
<body>
	<button class="circle p">Predators</button>
	<button class="circle s">Shrubs</button>
	<button class="circle d">Donate</button>
	<button class="circle t">Trees</button>
	<button class="circle h">Hebivores</button>
	<button class="circle v">Vacancies</button>
	<button class="circle f">Flowers</button>
	<button class="circle w">Workers</button>
	<button class="circle i">Info</button>
	<script>
		[].forEach.call(document.querySelectorAll(".circle"), function(el){
			el.addEventListener("click", function(e) {
				[].forEach.call(el.parentNode.children, function(child){ 
					if (child !== el) child.style.display ="none"; 
				});
			});
		});
	</script>
</body>

рони · #6 (**permalink**) 16.06.2017, 22:54

Сообщение от j0hnik

почему вы все время этот "1.12.4" jquery подключаете ?

1.потому что шаблон 2.потому что работает в ie и плагинах.

рони · #7 (**permalink**) 16.06.2017, 22:58

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide .circle{
    display: none;
  }
  .hide .show{
    display:  inline-block;
  }
  </style>
  <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
  <script>
  window.addEventListener("DOMContentLoaded", function() {
    var body = document.querySelector("body");
    body.addEventListener("click", function(event) {
        var target = event.target;
        if (target.closest(".circle")) {
            body.classList.add("hide");
            target.classList.add("show")
        }
    })
 });
  </script>
</head>

<body>
     <button class="circle p" >Predators</button>
	 <button class="circle s" >Shrubs</button>
	 <button class="circle d" >Donate</button>
	 <button class="circle t" >Trees</button>
	 <button class="circle h" >Hebivores</button>
	 <button class="circle v" >Vacancies</button>
	 <button class="circle f" >Flowers</button>
	 <button class="circle w" >Workers</button>
	 <button class="circle i" >Info</button>
</body>
</html>