JavaScript использует одну функцию для нескольких ID

Question

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

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>

Answer 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>

Это должно выглядеть так при разборе ("view source"):

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
    }
];

И вот основной javascriptpart:

<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.log(paragraph); // just checking what we've got here
  setInterval(function() {
         updateParagraph(paragraph);
      },
      paragraph.updateTime
  );
});

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