Javascript использовать одну функцию для нескольких идентификаторов

Я не могу понять, как использовать одну функцию сценария для большего количества идентификаторов. только для одного идентификатора он работает хорошо, но если я активирую второй

include('scripts/js/js_dynamisches_textdarstellung.php');

текст массива разделен на оба идентификатора. Я знаю, что код отвратителен, но это моя первая попытка понять, как он работает, и приятно видеть различные формы, как я могу устанавливать переменные с php на javascript. Проблема, которую я вижу, заключается в том, что функция все время имеет одно и то же имя, но я не нахожу решения, как это решить. спасибо за помощь

main.php

<a href = "#" target = "_blank" id = "dyn_Loop_main_v1">Bla to TEXT 1</a></li>    
<?php
  $var_anzahl_i_php = 0;
  $name_der_funktion = "thats_it_1";
  $var_reaktionszeit_in_ms_php = 1500;
  $var_id_php       = "dyn_Loop_main_v1";
  $var_array_php    = array("TEXT for ID_1_1",
                            "TEXT for ID_1_2",
                            "TEXT for ID_1_3",
                            "TEXT for ID_1_4");
  $var_count_array = count($var_array_php);
  print "<script type='text/javascript'> var var_array_inhalt = ".json_encode($var_array_php)."; </script>";
  //print "<script type='text/javascript'> var var_funktionsname = ".json_encode($name_der_funktion).$name_der_funktion."; </script>";
  include('scripts/js/js_dynamisches_textdarstellung.php');
?>

<a href = "#" target = "_blank" id = "dyn_Loop_main_v2">Bla to Text 2</a></li>    
<?php
  $var_anzahl_i_php = 0;
  $name_der_funktion = "thats_it_2";
  $var_reaktionszeit_in_ms_php = 1000;
  $var_id_php       = "dyn_Loop_main_v2";
  $var_array_php    = array("TEXT for ID_2_1",
                            "TEXT for ID_2_2",
                            "TEXT for ID_2_3",
                            "TEXT for ID_2_4");
  $var_count_array = count($var_array_php);
  print "<script type='text/javascript'> var var_array_inhalt = ".json_encode($var_array_php)."; </script>";
  //print "<script type='text/javascript'> var var_funktionsname = ".json_encode($name_der_funktion).$name_der_funktion."; </script>";
  include('scripts/js/js_dynamisches_textdarstellung.php');
?>

js_dynamisches_textdarstellung.php

<script>
      var var_anzahl_i            = "<?php echo $var_anzahl_i_php ?>";
      var var_i_from_count_i      = "<?php echo $var_count_array ?>";
      var var_ms_from_count_i     = "<?php echo $var_reaktionszeit_in_ms_php ?>";

      function var_funktionsname() {
        setTimeout(function () {
          document.getElementById('<?php echo $var_id_php ?>').innerHTML = var_array_inhalt[var_anzahl_i];
          var_anzahl_i++;
          if ( var_anzahl_i == var_i_from_count_i ) { var_anzahl_i = 0}
          if ( var_anzahl_i < var_i_from_count_i + +1) {
          var_funktionsname();
          }
        }, var_ms_from_count_i)
      }
      var_funktionsname();


</script>

определяешь 4 раза var_funktionsname ..

Jeff 26.10.2018 15:27

вы также перезаписываете var_array_inhalt

Jeff 26.10.2018 15:32

реструктурируйте эту функцию так, чтобы она принимала идентификатор в качестве параметра: var_funktionsname(elementId), и дважды вызывайте ее с вашими двумя идентификаторами: var_functionsname("dyn_Loop_main_v1");var_functionsname("dyn_Loop_main_v2");

Jeff 26.10.2018 15:36

сделайте себе одолжение и переименуйте свои переменные в то, что они на самом деле представляют. например, 'var_anzahl_i' - это не 'anzahl', а счетчик, 'var_i_from_count_i' - это просто 'arraySize' (который вы могли бы лучше определить только в js). 'var_funktionsname' - это не имя функции, это является функция, поэтому 'var' уже вводит в заблуждение

Jeff 26.10.2018 15:40

@ Джефф, как ты это имеешь в виду. я пытался установить var_name_function = "<? php echo $ var_id_php?>"; function var_funktionsname (var_name_function) в js_dynamisches_textdarstellung.php, но она не работает. не могли бы вы подать пример, который я должен изменить и как пожалуйста?

Eduard Tester 26.10.2018 17:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
285
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот быстрый макет того, как думаю вы должны это делать. Не проверено, возможны опечатки и т. д.

<?php
$paragraphs = []; // create an empty array we will put our two paragraphs into

// define your two paragraphs/text-items with everything that's unique to them:
$paragraph = new stdClass();  // just creates a simple object we can fill with infos
$paragraph->elementId = "dyn_Loop_main_v1";  // the id of the related html element
$paragraph->updateTime = 1500;  // how quick it should switch to next text in ms
$paragraph->content    = array("TEXT for ID_1_1",
                            "TEXT for ID_1_2",
                            "TEXT for ID_1_3",
                            "TEXT for ID_1_4");
$paragraph->default = "Default Text 1";
$paragraphs[] = $paragraph; // add this paragraph to the array
// same for the second paragraph:
$paragraph = new stdClass();
$paragraph->elementId = "dyn_Loop_main_v2";
$paragraph->updateTime = 1000;
$paragraph->content    = array("TEXT for ID_2_1",
                            "TEXT for ID_2_2",
                            "TEXT for ID_2_3",
                            "TEXT for ID_2_4");
$paragraph->default = "Default Text 2";
$paragraphs[] = $paragraph; // add this paragraph to the array

// you could now also create those 2 elements dynamicly via php:
foreach($paragraphs as $paragraph) {
   echo "<span id='{$paragraph->elementId}'>{$paragraph->default}</span>\n";
}
// OR write them hardcoded:
?>
    <span id = "dyn_Loop_main_v1">Default TEXT 1</span>
    <span id = "dyn_Loop_main_v2">Default TEXT 2</span>
<?php

// now let's transfer our paragraphs to javascript so that we can continue there:
?>
<script>
var paragraphs = <?php echo json_encode($paragraphs, JSON_PRETTY_PRINT); ?>;
</script>

При синтаксическом анализе это должно выглядеть так ("исходный код"):

var paragraphs = [
    {
        "elementId": "dyn_Loop_main_v1",
        "updateTime": 1500,
        "content": [
            "TEXT for ID_1_1",
            "TEXT for ID_1_2",
            "TEXT for ID_1_3",
            "TEXT for ID_1_4"
        ],
        "default": "Default Text 1",
        "counter": 0
    },
    {
        "elementId": "dyn_Loop_main_v2",
        "updateTime": 1000,
        "content": [
            "TEXT for ID_2_1",
            "TEXT for ID_2_2",
            "TEXT for ID_2_3",
            "TEXT for ID_2_4"
        ],
        "default": "Default Text 2",
        "counter": 0
    }
];

И вот основная часть javascript:

<script>
// define a function that updates the paragraphs and increases the counter.
// it takes one paragraph object as parameter.
function updateParagraph(paragraph) {
  document.getElementById(paragraph.elementId).innerHTML = paragraph.content[paragraph.counter];
  paragraph.counter++; // set counter up
    // if we've reached the end, reset to start:
  if (paragraph.counter>=paragraph.content.length) { 
    paragraph.counter = 0;
  }
}

// let's call that function with our first paragraph as parameter with the updateTime defined in an Interval:
setInterval(function() {
      updateParagraph(paragraphs[0]);
   },
   paragraphs[0].updateTime
);

// repeat for second:
setInterval(function() {
      updateParagraph(paragraphs[1]);
   },
   paragraphs[1].updateTime
);
</script>

Последняя часть может / должна, конечно, также стать динамической, поэтому вызывается / настраивается автоматически для каждого абзаца следующим образом:

paragraphs.forEach(function(paragraph) {
  console.info(paragraph); // just checking what we've got here
  setInterval(function() {
         updateParagraph(paragraph);
      },
      paragraph.updateTime
  );
});

Скрипка для части php: https://3v4l.org/fp68u
Скрипка для части Javascript: https://jsbin.com/nuxejutiga/edit?html,js,output

Другие вопросы по теме