Question

每次用户点击按钮时，都会触发模态，但无论用户点击哪个圆圈（按钮），所有模态都会显示第一个圆圈的内容。如何让每个模态仅显示用户点击的圆圈内容？

我的代码：

<?php
require_once 'Net/SSH2.php';
require_once 'phpseclib1.0.10/Crypt/RSA.php';
$config = require 'config.json';
$log = 'logfile.txt';

if(is_array($config)){
  foreach($config as $cred){
    $ssh = new Net_SSH2($cred['ip'], $cred['port']);
    $key = new Crypt_RSA();
    $key->loadKey($cred['key']);

    echo ($cred['name']); //get Raspberry PI name from config file

    if (!$ssh->login('pi', $key)){
        file_put_contents($log, "[".date('Y-m-d H:i:s')."]Login Failed for {$cred['ip']}\n", FILE_APPEND|LOCK_EX);
        continue;
    }

   $output = $ssh->exec('tail -1 /var/log/playlog.csv');
   $array = explode (',' , $output);

   if (end($array) >= 0){
   //trigger modal with button
   echo '<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';

   //modal
   echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel" aria="hidden">';
   echo '<div class="modal-dialog" role="document"';

   //modal content
   echo '<div class="modal-content">';
   echo '<div class="modal-header">';

   echo '<h4 class="modal-title" id="exampleModalLabel">Location: '.($cred['name']).'</h4>';
   echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
   echo '<span aria-hidden="true">&times;</span>';
   echo '</button>';
   echo '</div>';
   echo '<div class="modal-body">';
   echo '<p>No issues currently reported.</p>';
   echo '<p>Currently Playing: '.$array[1].'</p>';
   echo '</div>';
   echo '<div class="modal-footer">';
   echo '</div>';
   echo '</div>';
   echo '</div>';
   echo '</div>';
   echo '</div>';
   }else{
   echo '<div id="circleRed" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';
   //echo '<p>Issues: '.$array[2].'</p>';
   };
   }};

?>

Answer 1

而不是像这样的东西

...
if (end($array) >= 0){
//trigger modal with button
echo '<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';

//modal
echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel" aria="hidden">';
echo '<div class="modal-dialog" role="document"';

//modal content
echo '<div class="modal-content">';
echo '<div class="modal-header">';

echo '<h4 class="modal-title" id="exampleModalLabel">Location: '.($cred['name']).'</h4>';
echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
...

我推荐这个

...
if (end($array) >= 0) { ?>
<!-- trigger modal with button -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>

  <!-- modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel" aria="hidden">
    <div class="modal-dialog" role="document"

    <!-- modal content -->
      <div class="modal-content">
        <div class="modal-header">

          <h4 class="modal-title" id="exampleModalLabel">Location: <?= $cred['name']; ?></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
...

等等。

现在问题。当然它会打开相同的模态，因为你创建了几个具有相同id的模态。

你永远不应该这样做!!

这是一个快速修复：

将此行foreach($config as $cred){更改为此foreach($config as $key => $cred){

然后改变这个

echo '<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';

echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel" aria="hidden">';

...

echo '<h4 class="modal-title" id="exampleModalLabel">Location: '.($cred['name']).'</h4>';

...

echo '<div id="circleRed" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';

到这个

echo '<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal' . $key . '"></div>';

echo '<div class="modal fade" id="myModal' . $key . '" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel' . $key . '" aria="hidden">';

...

echo '<h4 class="modal-title" id="exampleModalLabel' . $key . '">Location: '.($cred['name']).'</h4>';

...

echo '<div id="circleRed" class="btn btn-primary" data-toggle="modal" data-target="#myModal' . $key . '"></div>';

通过单击按钮触发所有模态显示相同的内容

1 个答案: