Как изменить переменную JS в PHP в шаблоне странице WordPress?

Question

[Axel030392]

Здравствуйте, делаю свой шаблон страницы на вордпрес. Нужно чтоб основные картинки из подключенных категорий отображались списком, и при клике на одну из них, менялась картинка в другом блоке. Картинка должна соответствовать миниатюре, но быть размером "medium". Проблема в том, что не как не могу понять, как заставить переменные различать эти картинки. Скрипт которые я написал, берет данные от первой картинки, и просто не обновляется, то есть можно сделать только один клик и все выведенные картинки изменятся на первую и все. Как можно это реализовать

Пример последнего кода, который получился после все вариантов и поисков

<?php
if ( have_posts() ) : // если имеются записи в блоге.
  query_posts('cat=220');   // указываем ID рубрик, которые необходимо вывести.
  while (have_posts()) : the_post();  // запускаем цикл обхода материалов блога
 
    $imager3 = get_the_post_thumbnail_url( get_the_ID(), 'full' );
                    $imager4 = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
                $imager5 =  get_the_ID();
                ?>
                  <img  src="<?php echo $imager4 ?>" id="<?php echo $imager5?>" onClick="chg2(<?php echo $imager5?>)"> 
                    
<?php
  endwhile;  // завершаем цикл.
endif;
/* Сбрасываем настройки цикла. Если ниже по коду будет идти еще один цикл, чтобы не было сбоя. */
wp_reset_query();                
?>
 
<script>    
function chg2(){
    let idash = "<?php echo $imager5?>";
if (document.getElementById(idash).src="<?php echo $imager4?>"){
document.getElementById("per_4").src="<?php echo $imager3 ?>;"
}
}           
</script>
 <img src="1.jpg" id="per_4" style="width: 33%;">

Answer 1

[Axel030392]

Вопрос закрыт. Если у кого то будет подобная ситуация, например делать некий конфигуратор на основе страницы вордпреса, и элементами в виде статей в категории, то вот код

<?php
if ( have_posts() ) : // если имеются записи в блоге.
    query_posts('cat=220');   // указываем ID рубрик, которые необходимо вывести.
    while (have_posts()) : the_post();  // запускаем цикл обхода материалов блога

        $imager3 = get_the_post_thumbnail_url( get_the_ID(), 'full' );
        $imager4 = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
        $imager5 =  get_the_ID();
?>
        <img src="<?php echo $imager4 ?>" id="<?php echo $imager5?>" onClick="chg2('<?=$imager3?>')"> 

<?php
    endwhile;  // завершаем цикл.
endif;
/* Сбрасываем настройки цикла. Если ниже по коду будет идти еще один цикл, чтобы не было сбоя. */
wp_reset_query();
?>

<script>    
function chg2(link){
    document.getElementById("per_4").src = link;
}
</script>
<img src="1.jpg" id="per_4" style="width: 33%;">

Answer 2

[Павел]

Переменные $imager5 и так далее, доступны в цикле, вы пишите код JS вне цикла - то есть используете последние присвоенные значения у этих переменных.

let idash = "<?php echo $imager5?>";
if (document.getElementById(idash).src="<?php echo $imager4?>"){
document.getElementById("per_4").src="<?php echo $imager3 ?>;"

Вам нужно брать в JS эти данные из кода изображения, что-то типа

while (have_posts()) : the_post();  // запускаем цикл обхода материалов блога
 
    $imager3 = get_the_post_thumbnail_url( get_the_ID(), 'full' );
                    $imager4 = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
                $imager5 =  get_the_ID();
                ?>
                  <img  src="<?php echo $imager4 ?>" id="<?php echo $imager5?>" onClick="chg2('<?php echo $imager3 ?>', '<?php echo $imager4 ?>', '<?php echo $imager4 ?>')"> 
                    
<?php
  endwhile;  // завершаем цикл.

Выше в функцию chg2, при клике, вы передаёте все три изображения
И потом используете их в JS? тут уже никакого PHP:

<script>    
function chg2(imager3, imager4,  imager5 ){
    let idash = imager4 
if (document.getElementById(idash).src=imager4){
document.getElementById("per_4").src=imager5
}
}           
</script>

PS в работу кода я не вникал, а только указал на вашу ошибку....

Comments

[Axel030392]

Спасибо, но это не совсем то. Ответ получил на другом портале, все оказалось проще