Как реализовать скрытие определённых элементов при клике на один из них
Есть группа элементов(кнопок), при клике на один из них, должны скрываться все остальные, кроме того на который кликнули.
Хотел реализовать так: есть массив со всеми нужными элементами.При клике на один из них с помощью 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(); // скрываем все, что осталось
}
|
если с 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>
|
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>
|
Рони, друг мой, а почему вы все время этот "1.12.4" jquery подключаете ?
|
на всякий случай на 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>
|
Цитата:
|
:write:
<!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>
|
Рони
<script src="vanilla.js"></script> нафик ие8 ;) |
Цитата:
:) http://caniuse.com/#search=closest |
Цитата:
вообще ei нужный браузер. ему есть отличное применение скачать через него хром когда винда чистая :victory: |
| Часовой пояс GMT +3, время: 08:53. |