javascript使用一个函数用于多个ID

Question

i cant figure out how to use one script function for more id's. for just one id it works well, but if i activate the secound

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

the array text is splited over both ID's. i know the code is disgusting atm, but it's my first try to understand how it works and it's nice to see the different forms how i could set the variables from php to javascript. the problem what i see is, that the function has all the time the same name but i don't find a solution how to solve that. thx for help

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

Here's a quick mock up of how I think you should do this. This is not tested, there might be typos, etc..

<?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>
";
}
// 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>

This should look like this when parsed ("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
    }
];

And here's the main javascript part:

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

The last part could/should of course also get dynamic, hence called/set up automaticly for each paragraph like this:

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

Fiddle for the php part: https://3v4l.org/fp68u
Fiddle for the Javascript part: https://jsbin.com/nuxejutiga/edit?html,js,output