Разные классы для динамически генерируемых элементов

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем Jevgeni, 09.09.2020.

  1. Offline

    Jevgeni Недавно здесь

    Регистрация:
    07.09.2020
    Сообщения:
    2
    Симпатии:
    0
    Пол:
    Мужской
    Здравствуйте, создаю сайт с помощью плагина Joombri freelance. На странице выбора плана представлены способы оплаты.(см. фото1). Эти элементы имеют одинаковые классы(см. фото2). Можно ли как то сделать, чтобы классы у них были разные (необходимо стилизовать каждый по отдельности)? Ниже часть кода которая генерирует "label" элементы и задает им классы.

    Код (PHP):
    1. $html .=  "\n\t".
    2.  
    3.           '<label id="radio" class="radio" style="min-height:42px;">'. "\n".
    4.  
    5.            '<input type="radio" style="float:none;" name="'.$var.'" id="'.$var.'" value="'.$item->value.'" '.$checked.'>'.
    6.            $img.
    7.            '<span style="margin-left: 10px;">'.JText::_($item->text).'</span>'.
    8.  
    9.              '</label>';
    10.  
    11.      }
    12.  
    13.    }
    14.  
    15.    $html .= "\n";
    16.    return $html;



    Я пробовал достичь цели с помощью цикла "foreach". Но тогда на экран выводится 9 элементов. 3 Bank transfer, 3 PayPal и 3 Stripe. Ниже доработанный код


    Код (PHP):
    1. $idlist = array("class1", "class2", "class3");
    2.      foreach($idlist as $class){
    3.      $html .=  "\n\t".
    4.  
    5.           '<label id="' . $class. '" class="radio" style="min-height:42px;">'. "\n".
    6.  
    7.            '<input type="radio" style="float:none;" name="'.$var.'" id="'.$var.'" value="'.$item->value.'" '.$checked.'>'.
    8.            $img.
    9.            '<span style="margin-left: 10px;">'.JText::_($item->text).'</span>'.
    10.  
    11.              '</label>';
    12.  
    13.      }
    14.  
    15.    }
    16.  
    17.    $html .= "\n";
    18.    return $html;



    Есть ли возможность достичь желаемого результата?
     

    Вложения:

    • фото1.jpg
      фото1.jpg
      Размер файла:
      46.7 КБ
      Просмотров:
      0
    • фото2.jpg
      фото2.jpg
      Размер файла:
      82.8 КБ
      Просмотров:
      0
  2.  
  3. Лучший ответ:
    Сообщение #2 от 09.09.2020, автор OlegK
  4. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    Лучший ответ
    Псевдоклассы CSS
    :nth-child
    odd Все нечетные номера элементов.
    even Все четные номера элементов.
     
    Jevgeni нравится это.
  5. Offline

    Jevgeni Недавно здесь

    Регистрация:
    07.09.2020
    Сообщения:
    2
    Симпатии:
    0
    Пол:
    Мужской
    Немного изменил предложенный вами вариант
    Код (css):
    1. :nth-child(n)
    где n - порядковый номер элемента
    И желаемый результат был достигнут. Спасибо огромнейшее!
     

Поделиться этой страницей

Загрузка...