Como obter a posição do vetor php no javascript?

[Paulo Ladeira 0]

Como obter a posição do vetor que equivale a posição da foto que foi clicada quando selecionada no evento onclick ?

A primeira foto selecionada no banco de dados, deve mostrar as fotos 01,02 e 03. A segunda foto, deve mostrar os angulos 04,05 e 06  e assim sucessivamente...!

Segue o link para visualizar melhor, no modelo     CAPTUR.
syncpl.com.br/dsv/veiculos.php
 

<?php
if ($_SERVER['REQUEST_METHOD'] != 'POST') { die(); } 

$arquivo_pd = "tb_veiculos"; 
$selecao = "0"; 
$sql = null; 

$modelo = array();
$marca  = array(); 
$cor    = array();  
$url_foto01 = array(); 
$url_foto02 = array();
$url_foto03 = array(); 
 
$modelo_marca  = $_POST['modelo_marca'];
$pesq   = "false";    
$selconv = "0";  
?>

  <div class="container-fluid cfg-servicos padding-top mt-3 mb-5" id="veiculos">
     <p class="cfg-titulo text-center"><b>AUTOMÓVEIS</b></p>
      <div id="accordion"> 
           <div class="row justify-content-left"> 
                <?php 
                while ($pesq == "false") {
                       if ($modelo_marca != "") {  
                           $sql = "SELECT * FROM $arquivo_pd WHERE modelo like '%".$modelo_marca."%'" 
                                                               or die('Erro de seleção na tb_veiculos');
                           $pesq = "true";
                       }
    
                $result_pd= mysqli_query($strcon,$sql)  or die('Erro de consulta na tb_veiculos');
                $selconv = "0";
                while ($row = mysqli_fetch_array($result_pd)) { 
                       $modelo[]     = $row['modelo'];
                       $marca[]      = $row['marca'];
                       $cor[]        = $row['cor'];
                       $url_foto01[] = $row['url_foto01'];
                       $url_foto02[] = $row['url_foto02'];
                       $url_foto03[] = $row['url_foto03'];
                       $lin++;
                       $selconv = "1";  
                       }
            
                if ($selconv == "0") { ?>
                   <script> alert ("Seleção não encontrada!!");</script> <?php
                   $pesq = "true";  
                }
                $pesq = "true"; 

           for($i = 0; $i < $lin; $i++) { if ($modelo[$i] != "") { $rows++; } }    
           for($i = 0; $i < $rows; $i++) { 
            ?>
               <div class="col-md-3 col-sm-6 col-10 ml-5">
                    <div class="card">
                         <div class="inner">
                              <img class="card-img-top" src=<?php echo json_encode($url_foto01[$i]);?> id="trocaimg" alt="modelo">
                         </div>
                         <div class="card-header">  
                              <input type="button" value="1" onclick="img01();" />
                              <input type="button" value="2" onclick="img02();" />
                              <input type="button" value="3" onclick="img03();" />
                             <script>
                               function img01 () {
                                 document.getElementById("trocaimg").src=<?php echo json_encode($url_foto01[$i]);?>;
                               }
                               function img02 () {
                                 document.getElementById("trocaimg").src=<?php echo json_encode($url_foto02[$i]);?>;
                               } 
                               function img03 () {
                                 document.getElementById("trocaimg").src=<?php echo json_encode($url_foto03[$i]);?>;
                               }
                              </script>
                         </div>
                         <div class="card-body">
                              <?php
                               echo "$modelo[$i]<br>";
                               echo "$marca[$i]<br>";
                               echo "$cor[$i]";                                
                               ?>
                         </div>
                   </div>
              </div><!--col-md--> 
              <?php
            }
               }
              ?> 
          </div>
    </div>  
</div><!--container-->

 

[tetsuo 0]

Olá! Eu não entendi muito bem...
Mas creio que seja melhor separa o php(que é server side - roda no servidor) do javascript(que é client side - roda no browser).
Assim sendo, o ideal seria o sr. fazer um requisição ajax(javascript) ao php, que lhe devolveria um json com tudo o que o sr. precisar.

Assim, fica tudo(o array e suas posições) no javascript, e o sr. vai poder manipular como quiser.

[Paulo Ladeira 0]

Ok! Vou ter que pesquisar sobre o Ajax, pois não tenho ideia de como se faz isso!

Ficou misturado mesmo!