https://codepen.io/anon/pen/wbPKQX
Bez względu na to, w który przycisk kliknę (dla której kolumny tekstu) zawsze rozwija się jedynie pierwszy element.
Jak poprawnie napisać kod żeby każdy z przycisków działał dla swojego pola?
0
2
Tam masz jedno id przypisane do wielu elementów z tego co widzę.
Tutaj masz implementację w css:
https://codepen.io/ojbravo/pen/YPJpXe
a tutaj w js:
https://www.cssscript.com/read-more-read-less-functionality-in-pure-javascript-readmore-js/
0
Czyli gdybym chciała uruchomić poprawnie ten kod to musiałabym dać innej ID dla przycisku każdej części?
0
Cóż trochę jeszcze próbowałam ale musiałam się poddać.
Dlatego ponownie proszę o jakąś pomoc bo niestety nie idzie :)
Miało być prościej z jQuery ale no cóż - o ile kod działa i go rozumiem tak nadal działa tylko dla pierwszego okna. Próbowałam ustawiać różne ID i robić w JS po prostu dłuuuugiego kodowego tasiemca wywołującego funkcję dla różnych ID ale to też nic nie daje - po kliknięciu w inne przyciski i tak otwierał się pierwszy.
Czytając trafiłam na .live oraz each ale przyznam szczerze, że to chyba jeszcze trochę za wysoki dla mnie próg, bo nie wiem jak to złożyć.
Oto kod, który mam obecnie.
Bardzo proszę o jakieś wskazówki jak to ruszyć
https://codepen.io/anon/pen/GaQvLd
1
Mały offtop: taka porada - staraj się nie stosować jQuery. Ta biblioteka jest dość popularna na początku, bo sprawia wrażenie, że ułatwia pewne tematy, ale tak naprawdę to masz coś ważące 100-200kb, którego głównym osiągnięciem jest zamiania getElementByID na znaczek dolara ;)
Jeśli chcesz pisać lekkie i szybkie aplikacje w JavaScript to zainteresuj się frameworkiem Vanilla JS - http://vanilla-js.com/
Do poczytania - https://tutorials.comandeer.pl/js-jquery.html - czyli Czemu nie potrzebujesz jQuery?
2
body {
display: flex;
}
div.x {
flex-direction: column;
flex: 3 100px;
background: silver;
margin-left: 1px;
}
<body style="background: darkolivegreen;">
<div class="x">
Example.........................
Example.........................
Example.........................
Example.........................
</div>
<div class="x">
Example.........................
Example.........................
Example.........................
Example.........................ttttt
</div>
<div class="x">
Lorem Ipsum. Lorem Ipsum.
Lorem Ipsum. Lorem Ipsum.
</div>
var arr = [];
for(var i=0;i<document.querySelectorAll('.x').length;i++){
var b = document.querySelectorAll('.x')[i];
arr.push(b.innerHTML);
}
var inc = -1;
function abc2(arg2) {
if(arg2!==undefined){
var g=arg2;
var length_g = 0;
}else{
var length_g = document.querySelectorAll('.x').length;
var g = 0;
}
if(inc==0) {
var scope = arr[g].length;
inc--;
}else{
var scope = 10;
inc++;
}
do{
document.querySelectorAll('.x')[g].innerHTML = arr[g].substring(0,scope)+' ';
var span2 = document.createElement('a');
span2.innerText = '(...)';
span2.href = '#';
document.querySelectorAll('.x')[g].insertAdjacentElement('beforeend',span2);
g++;
}while(g<length_g);
}
abc2();
document.addEventListener('click',(evt) => {
if(evt.target.matches('div > a')){
abc2([].slice.call(document.querySelectorAll("div")).indexOf(evt.target.parentNode));
}
},false);
// Przy pomocy pewnej osoby z IRC napisałem ten kod bodajże z freenode z #programming.
//https://stackoverflow.com/questions/28229564/jquery-index-equivalent-in-vanilla-js
//https://davidwalsh.name/nodelist-array
</body>
0
Dziękuję wszystkim :)
Po prostu nie chciałabym korzystać z kodu, w którym czegoś nie rozumiem i tylko bezmyślnie skopiować go i dostosować dlatego zależało mi na uruchomieniu tego co udało mi się napisać na podstawie tego co zrozumiałam czytając inne kody :)