Otwieranie dodatkowych divów za pomocą JS (argument "document.querySelectorAll")

0

Witam. Mam poniższy skrypt który służy mi do otwierania podrzędnych divów po nakliknieciu:

<script type="text/javascript">
				document.addEventListener("DOMContentLoaded", function() {
    				var more = document.getElementById('more-option1');
    					more.addEventListener('click', function(e) {
    						e.preventDefault();
       							document.querySelectorAll('#match2-add1, #match2-add2, #match2-add3, #match2-add4').forEach(function(i,v) {
        					i.classList.toggle('show');
       			 		});
   					 })
				});
			</script>	

I wszystkim "selektorom" w każdym divie musze zmieniać nazwe gdyż każdy div to inny mecz i ma inne podrzędne divy.
Nie ukrywam że tych meczy jest od groma, i średnio mi sie widzi dla każdego podrzędnego diva ustalać nazwę i do tej każdej unikatowej nazwy dodawać CSS.
Jedynie ID meczu będzie zastąpione na zmienną "match<php echo'$match'>-add1". W jaki sposób można to uprościć ?

a propos tego skryptu mam jeszcze jedno pytanie, da sie go jakoś przerobić tak żeby po kliknięciu na ikonę wyświetlało sie okienko ale nie w nowej karcie tylko tak jakby nadrzędne nad obecną treścią, i podczas gdy to okienko jest otwarte klikniecie poza jego obszarem wychodzi z niego.

Z góry dzięki

1

To ja mam propozycję - możesz nam przedstawić problem w jakiejś graficznej szacie? Bo z tego co piszesz, niewiele da się zrozumieć...

Zapewne wystarczy przerobić HTML, dorzucić parę klas i do nich dać parę zdarzeń, żeby to w miarę zadziałało, ale z tego kodu i z tego co piszesz, ciężko cokolwiek wywnioskować..

0
<div id="match-box">
			<script type="text/javascript">
				document.addEventListener("DOMContentLoaded", function() {
    				var more = document.getElementById('more-option');
    					more.addEventListener('click', function(e) {
    						e.preventDefault();
       							document.querySelectorAll('#match1-add1, #match1-add2, #match1-add3, #match1-add4').forEach(function(i,v) {
        					i.classList.toggle('show');
       			 		});
   					 })
				});
			</script>	

				<img src="img"/>
					<div id="team1">

				<div id="team2">

					</div>
					<div id="match-page"><a href="">Match</a></div>
				<a href="#match1"><div id="more-option"><b>+2</b></div></a></a></div>


		

				<div id="match1-add1">
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

				<div id="match1-add2">
vvvvvvvvvvvvvvvvvvvvvvvv
				<div id="match1-add3">
vvvvvvvvvvvvvvvvvvv
				<div id="match1-add4">
vvvvvvvvvvvvvvvvvvvvvvvvv
				</div>						

1

Ok, Twój problem można rozwiązać bardzo szybko o ile zaprzyjaźnisz się z jakąś fajną biblioteką JS, np. popuarnym (jQuery

Więc, Twój kod mógłby wyglądać np. tak:

<div id="match1" class="match">
<!-- Treść -->
<a class="match-toggle" href="#">Rozwiń</a>
</div>
<div id="match2" class="match">
<!-- Treść -->
<a class="match-toggle" href="#">Rozwiń</a>
</div>
<div id="match3" class="match">
<!-- Treść -->
<a class="match-toggle" href="#">Rozwiń</a>
</div>
<div id="match4" class="match">
<!-- Treść -->
<a class="match-toggle" href="#">Rozwiń</a>
</div> 

A kod JS tak:

$("a.match-toggle").on('click',function()
{
$(this).closest(".match").toggle('show');
});

To oczywiście pseudokod - trzeba go dostosować do prawdziwego kodu. Czyli - dodajesz sobie przycisk Rozwiń czy coś tam i temu nadajesz klasę. Ten przycisk będzie teraz obsługiwał żądanie wewnątrz Twojego diva o klasie match. Dzięki temu masz 4 linijki kodu do rozwijania DIVa, w którym masz mecz, nawet jak tych divów będziesz miał milion.

Jeśli chodzi o wyskakujące okienko o które pytasz (tzw. popup) jest do tego masa wtyczek do jQuery (https://www.jqueryscript.net/tags.php?/popup/)

0

Dokładnie o to mi chodziło, Dzięki wielkie !

0

Przerobiłem skrypt mniej więcej tak

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <style>

.matchadd {
    display:none;
    font-weight: bold;
    font-size: 16px;
  }
.matchadd.show
{
display:block;

}

  </style>

</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".matchadd").toggle(1000);
    });
});
</script>

<div id="match1" class="match">
xxxxxxxxxxxxxxxxx
<button>Rozwiń</button>
<div class="matchadd">AAAAAAAA</div>
</div>
<div id="match2" class="match">
xxxxxxxxxxxxxxxxx
<button>Rozwiń</button>
<div class="matchadd">AAAAAAAA</div>
</div>
<div id="match3" class="match">
xxxxxxxxxxxxxxxxx
<button>Rozwiń</button>
<div class="matchadd">AAAAAAAA</div>
</div>
<div id="match4" class="match">
xxxxxxxxxxxxxxxxx
<button>Rozwiń</button>
<div class="matchadd">AAAAAAAA</div>
</div> 
</body>
</html>

I nie wiem co dokładnie miała wnieść funkcja "closest" bo średnio mi to pasowało, ale mam pytanie jak zrobić żeby ta funkcja otwierała div tylko w jednym id a nie w wszystkich

0

Closest szuka najbliższego parenta o danej klasie - czyli w Twoim przypadku podejmuje działania tylko na tym divie, w którym znajduje się button. Inaczej akcja dzieje się na wszystkich divach jak to jest w Twoim przypadku

0

A powiesz co dokladnie trzeba poprawić, bo męcze sie z tym od dwóch dni i dalej nie moge tego do końca zrobić...

0

Dla tych co szukają odpowiedzi:

	<script>
$("div.naglowek span").click(function () {
    var przycisk = $(this);
    var tajnaTresc = przycisk.closest(".naglowek").next(".ukryty_tekst2");
    
    tajnaTresc.toggle(500);
    
    var czyTajnaTrescJestUkryta = tajnaTresc.is(":hidden");
    
    przycisk.text(czyTajnaTrescJestUkryta ? "+2" : "+2");
});
	</script>

1 użytkowników online, w tym zalogowanych: 0, gości: 1