Question

我允许自己发布此主题，因为我一直在WordPress中运行脚本。实际上，我创建了一个函数，该函数允许您在div包中显示，并且在它们内部是它们的相应任务。

基本上，我必须在WordPress中创建一个插件才能做到这一点。

我进行了选择，当我选择一个客户端并单击“选择”时，返回与该客户端相对应的内容（包装和各自的任务）。

这是单击第二个包之前的样子（从10/01/2020开始）：

这是单击后的样子：

以下是与之相对应的代码（我不放置其他三个函数的代码，因为它们对于理解它并不有趣）：

function contenuAffichage($idClient){

// Permet d'afficher le temps restant dans le pack du client
$bdd=new wpdb('root','','appchrono','localhost');
$temps = $bdd->get_row("SELECT `tempsContrat` FROM `clients` WHERE`IDUSER`=".$idClient);
$tTemps = get_object_vars($temps);
$affichageTemps = convertisseurTemps(implode("",$tTemps));
$contenu = "<p class='info' id='solde'>SOLDE TEMPS RESTANT :</p>
<p class='info' id='tempsRestant'>".$affichageTemps."</p>";
// Permet d'afficher le(s) pack(s) correspondant(s) au client (par son id) 
$rows = $bdd->get_results("SELECT `IDPACK`,`DESCRIPTIF`,`DATEAJOUT` FROM `packs` WHERE `IDUSER`=".$idClient." AND  `DESCRIPTIF` LIKE '%pack assistance%' ORDER BY `packs`.`DATEAJOUT` DESC");
$contenu.="<div class='info'><p class='note'>Note : temps minimum d’intervention de 15 minutes par demande.</p>
            <p class='note'>Si l’intervention résulte d’un bug ou d’un dysfonctionnement du système, aucun débit temps ne sera effectué.</p></div>";
foreach ($rows as $values) :
        $contenu .=" <button class='accordion' value=".$values->IDPACK.">".$values->DESCRIPTIF." du ".dateFR($values->DATEAJOUT)."</button>";
        // Permet d'afficher la liste des tâches présentes dans le pack
    $lignes = $bdd->get_results("SELECT `DESCRIPTIF`,`TEMPSINTERVENTION`,`DATECREATION` FROM `taches` WHERE `IDPACK`=".$values->IDPACK." ORDER BY `taches`.`DATECREATION` DESC");
    $idPack = $values->IDPACK;
    $contenu.="<div class='panel'>";
    foreach ($lignes as $values) :
        $contenu.="<div id='listeTaches'>
                        <div class='dateTaches'><b>".dateFR($values->DATECREATION)."</b> :</div>
                            <div class='commTaches'>".$values->DESCRIPTIF."</div>
                            <div class='tempsTaches'>(".$values->TEMPSINTERVENTION." min)</div>
                        </div><br>";
    endforeach;
    // Permet d'afficher le report de temps du pack précédent
    $lignes = $bdd->get_results("SELECT `IDUSER`,`DESCRIPTIF`,`DATEAJOUT` FROM `packs` WHERE `IDUSER`=".$idClient." AND  `DESCRIPTIF` LIKE '%Report solde%' AND`REPORTPACK`= ".$idPack);
    foreach ($lignes as $values) :
        $contenu.="<div id='reportPack'>
                    <div class='dateReport'><b>".dateFR($values->DATEAJOUT)."</b> :</div>
                        <div class='commReport'>".$values->DESCRIPTIF."</div>
                        </div><br>";
    endforeach;
    $contenu.="</div>";
endforeach;

if ($contenu !=""){ $affichage= searchReplace($contenu); }

return $affichage;}

由于时间不足，我不得不放弃插件设计，因为我无法为每个客户端正确生成简码。因此，我在主题的functions.php中复制了此函数的内容。我还创建了另一个函数来调用CSS和应用于该函数的样式。

我在主题中创建了两个文件夹（css和js），以这种方式在functions.php中调用了该文件夹：

function load_my_files() {   
   wp_enqueue_script('script', '/wp-content/themes/twentytwenty/js/tachesClients.js'); 
   wp_enqueue_style('style', '/wp-content/themes/twentytwenty/css/tachesClients.css'); 
} 
add_action('init', 'load_my_files');

感谢一个允许在WordPress下编写php代码（XYZ PHP代码）的插件，我在想要的页面中调用了contentDisplay函数。

此CSS和JavaScript集成在一起，但是不幸的是，Javascript无法正常工作。

这是JavaScript代码：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
       panel.style.display = "none";
    } else {
       panel.style.display = "block";
    }
  });
}
console.log("fichier JS");

这是我在页面上看到的：

console.log在我的控制台中显示良好，但是手风琴效果不起作用。您知道为什么它不起作用吗？

预先感谢您的回答。

我希望收到您的来信，

达米恩

-编辑--

谢谢Dcdanny的回答。我编辑这篇文章来回答你。如果我单击手风琴按钮，它们将不起作用。

这是console.log在工作时（对于插件）的“ acc”结果：

console.log无效时的结果：

我不明白为什么将手风琴按钮可用于插件，而当我将函数放入functions.php时却不起作用。

我试图像这样直接在functions.php中添加javascript：

function wpb_hook_javascript(){
  ?>
  <script>
  var acc = document.getElementsByClassName("accordion");
  var i;
  console.log(acc);
  for (i = 0; i < acc.length; i++) {
     acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
     });
  }
</script>
<?php
}
add_action('wp_head','wpb_hook_javascript');

但是结果是一样的...

-编辑2- 我设法解决了这个问题。实际上，我删除了JavaScript代码，并修改了HTML代码。我使用了details和summary标签来获取所需的渲染。这可能对某人有帮助，所以这是我修改的代码：

function contenuAffichage($idClient){
// Permet d'afficher le temps restant dans le pack du client
$bdd=new wpdb('root','','appchrono','localhost');
$temps = $bdd->get_row("SELECT `tempsContrat` FROM `clients` WHERE`IDUSER`=".$idClient);
$tTemps = get_object_vars($temps);
$affichageTemps = convertisseurTemps(implode("",$tTemps));
$contenu = "<p class='info' id='solde'>SOLDE TEMPS RESTANT :</p>
<p class='info' id='tempsRestant'>".$affichageTemps."</p>";
// Permet d'afficher le(s) pack(s) correspondant(s) au client (par son id) 
$rows = $bdd->get_results("SELECT `IDPACK`,`DESCRIPTIF`,`DATEAJOUT` FROM `packs` WHERE `IDUSER`=".$idClient." AND  `DESCRIPTIF` LIKE '%pack assistance%' ORDER BY `packs`.`DATEAJOUT` DESC");
$contenu.="<div class='info'><p class='note'>Note : temps minimum d’intervention de 15 minutes par demande.</p>
        <p class='note'>Si l’intervention résulte d’un bug ou d’un dysfonctionnement du système, aucun débit temps ne sera effectué.</p></div>";
foreach ($rows as $values) :
    $contenu .=" <details id='accordion'>";
    // Permet d'afficher la liste des tâches présentes dans le pack
    $lignes = $bdd->get_results("SELECT `DESCRIPTIF`,`TEMPSINTERVENTION`,`DATECREATION` FROM `taches` WHERE `IDPACK`=".$values->IDPACK." ORDER BY `taches`.`DATECREATION` DESC");
    $idPack = $values->IDPACK;
    $contenu.="<summary id='summary' value=".$values->IDPACK.">".$values->DESCRIPTIF." du ".dateFR($values->DATEAJOUT)."</summary>";
    foreach ($lignes as $values) :
        $contenu.="<div id='listeTaches'>
                    <div class='dateTaches'><b>".dateFR($values->DATECREATION)."</b> :</div>
                        <div class='commTaches'>".$values->DESCRIPTIF."</div>
                        <div class='tempsTaches'>(".$values->TEMPSINTERVENTION." min)</div>
                    </div>";
    endforeach;
    // Permet d'afficher le report de temps du pack précédent
    $lignes = $bdd->get_results("SELECT `IDUSER`,`DESCRIPTIF`,`DATEAJOUT` FROM `packs` WHERE `IDUSER`=".$idClient." AND  `DESCRIPTIF` LIKE '%Report solde%' AND`REPORTPACK`= ".$idPack);
    foreach ($lignes as $values) :
        $contenu.="<div id='reportPack'>
                <div class='dateReport'><b>".dateFR($values->DATEAJOUT)."</b> :</div>
                    <div class='commReport'>".$values->DESCRIPTIF."</div>
                    </div><br>";
    endforeach;
    $contenu.="</details>";
endforeach;

if ($contenu !=""){ $affichage= searchReplace($contenu); }

return $affichage;
}

为什么WordPress会阻止JavaScript

0 个答案: