Question

我不知道如何使用一个脚本函数来获取更多ID。仅使用一个id即可正常工作，但是如果我激活secound

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

将数组文本拆分为两个ID。我知道代码令人反感的atm，但这是我第一次尝试了解它的工作原理，很高兴看到不同的形式，如何将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>

解析后，它应该看起来像这样（“查看源代码”）：

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.log(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

javascript将一个函数用于多个ID

1 个答案: