Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   как сократить код (https://javascript.ru/forum/events/83773-kak-sokratit-kod.html)

leon2009sp 05.03.2022 18:49
как сократить код
 
Здравствуйте! как можно сократить код?
function first() {
document.getElementById("second_hide").setAttribute("style", "opacity:1; transition: 1s; height: 100%;");
document.getElementById("first").setAttribute("style","display: none");
document.getElementById("first_yelloy").setAttribute("style","display: block");
}
function first_yelloy() {
document.getElementById("second_hide").setAttribute("style","display: none");
document.getElementById("first_yelloy").setAttribute("style","display: none");
document.getElementById("first").setAttribute("style","display: block");
}
function first2() {
document.getElementById("second2_hide").setAttribute("style", "opacity:1; transition: 1s; height: 100%;");
document.getElementById("first2").setAttribute("style","display: none");
document.getElementById("first2_yelloy").setAttribute("style","display: block");
}
function first2_yelloy() {
document.getElementById("second2_hide").setAttribute("style","display: none");
document.getElementById("first2_yelloy").setAttribute("style","display: none");
document.getElementById("first2").setAttribute("style","display: block");
}
function first3() {
document.getElementById("second3_hide").setAttribute("style", "opacity:1; transition: 1s; height: 100%;");
document.getElementById("first3").setAttribute("style","display: none");
document.getElementById("first3_yelloy").setAttribute("style","display: block");
}
function first3_yelloy() {
document.getElementById("second3_hide").setAttribute("style","display: none");
document.getElementById("first3_yelloy").setAttribute("style","display: none");
document.getElementById("first3").setAttribute("style","display: block");
}

вывод на экран:
<div class="rigal">
<h id='first' onclick='first()' class='text15'>читать далее...</h>
<h id='first_yelloy'; style='display:none' onclick='first2_yelloy()' class='text15'>Скрыть блок</h>
</div>
<div id='second_hide' style='display:none'>111111111111111.</div>
<div class="rigal">
<h id='first2' onclick='first2()' class='text15'>читать далее...</h>
<h id='first2_yelloy'; style='display:none' onclick='first2_yelloy()' class='text15'>Скрыть блок</h>
</div>
<div id='second2_hide' style='display:none'>222222222222222.</div>
<div class="rigal">
<h id='first3' onclick='first3()' class='text15'>читать далее...</h>
<h id='first3_yelloy'; style='display:none' onclick='first3_yelloy()' class='text15'>Скрыть блок</h>
</div>
<div id='second3_hide' style='display:none'>333333333333333333.</div>

leon2009sp 05.03.2022 18:51
ну 
<div class="rigal">
	<h id='first' onclick='first()' class='text15'>читать далее...</h>
	<h id='first_yelloy'; style='display:none' onclick='first2_yelloy()' class='text15'>Скрыть блок</h>
	</div>

этот кусок лежит в разных файлах: 1.txt 2.txt 3.txt
может подсчитать файлы

рони 05.03.2022 19:43
leon2009sp, форум поиск
открывашка зависимая

leon2009sp 05.03.2022 20:50
ну не как это зависимая?
 
может что нибудь придумкать можно :victory: лучше с пояснениями:
5 файлов txt, в каждом файле код:
<div class="rigal">
<h id='first' onclick='first()' class='text15'>читать далее...</h>
<h id='first_yelloy'; style='display:none' onclick='first_yelloy()' class='text15'>Скрыть блок</h>
</div>
<div id='second_hide' style='display:none'>1111111111111</div>

вывод текста.
весь этот текст выводим в один файл через php. 
foreach ($filelist as $filename)
{    
	$path_info = pathinfo($filename);
	$text_content = file_get_contents($texts_dir . $path_info['filename'] . '.txt');
	echo "<tr><td>
	<table class='table3'>
	<tr>
	<td class='td17'><img src='{$filename}' class='img2' alt='Новости Сибири'></td>
	<td class='td18'>{$text_content}</td>
	</tr>
	</table>

и сам код скрыть или показать текст:::
function first() {
document.getElementById("second_hide"+i*filecount).setAttribute("style", "opacity:1; transition: 1s; height: 100%;");
document.getElementById("first"+i*filecount).setAttribute("style","display: none");
document.getElementById("first_yelloy"+i*filecount).setAttribute("style","display: block");
}
function first_yelloy() {
document.getElementById("second_hide"+i*filecount).setAttribute("style","display: none");
document.getElementById("first_yelloy"+i*filecount).setAttribute("style","display: none");
document.getElementById("first"+i*filecount).setAttribute("style","display: block");
}

воть=я не знаю как сократить JS код потому что получается:
1,2,3,4,5...
может по количеству файлов в папке прибавить по 1 i:=i+1;
потом нашел поиск файлов два скрипта:
Цитата:
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
document.getElementById("output").innerHTML=allTex t;

}
}
}
rawFile.send(null);
}
и
Цитата:
function givMeFiles (dir, files)
{
files = files || [];
var allFiles = fs.readdirSync(dir);
for (var i =0; i<allFiles.length; i++){
var name = dir + '/' + allFiles[i];
if (fs.statSync(name).isDirectory()){
givMeFiles (name, files);
} else {
files.push(name);
}
}
return files;
};
givMeFiles ("admin/ru")
или это я опять из фантастики Эйнштейна :-?

leon2009sp 06.03.2022 06:14
идея была такой:
 
идея была такой:
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
document.getElementById("output").innerHTML=allText;

function first() {
document.getElementById("second_hide"+i*filecount).setAttribute("style", "opacity:1; transition: 1s; height: 100%;");
document.getElementById("first"+i*filecount).setAttribute("style","display: none");
document.getElementById("first_yelloy"+i*filecount).setAttribute("style","display: block");
}
function first_yelloy() {
document.getElementById("second_hide"+i*filecount).setAttribute("style","display: none");
document.getElementById("first_yelloy"+i*filecount).setAttribute("style","display: none");
document.getElementById("first"+i*filecount).setAttribute("style","display: block");
}


}
}
}
rawFile.send(null);
}

рони 06.03.2022 07:50
Цитата:
Сообщение от leon2009sp
ну не как это зависимая?
тогда просто открывашка)))

и стандартизируйте блоки, уберите все id, сделайте у всех блоков одинаковые классы.

рони 06.03.2022 08:06
открывашка открыть закрыть блок со сменой текста на кнопке
 
leon2009sp,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .rigal + .content{
      display: none;
  }
  .rigal.open + .content{
      display:  block;
  }
  .rigal > h3:after{
      content: attr(data-hide);
  }
  .rigal.open > h3:after{
      content: attr(data-open);
  }
  </style>

  <script>
document.addEventListener( "click" , function(event) {
let target = event.target.closest('.rigal')
if(target) target.classList.toggle('open')

});
  </script>
</head>

<body>
<div class="rigal">
<h3 class='text15' data-open='Скрыть блок' data-hide='читать далее...'></h3>
</div>
<div class='content'>1111111111111</div>
<div class="rigal">
<h3 class='text15' data-open='Скрыть блок' data-hide='читать далее...'></h3>
</div>
<div class='content'>222222222222222</div>
<div class="rigal">
<h3 class='text15' data-open='Скрыть блок' data-hide='читать далее...'></h3>
</div>
<div class='content'>333333333333333333</div>
</body>
</html>


Часовой пояс GMT +3, время: 17:28.