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

Discussion in 'Изменение шаблона (кастомизация)' started by Jevgeni, Sep 9, 2020.

  1. Offline

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

    Joined:
    Sep 7, 2020
    Messages:
    2
    Likes Received:
    0
    Gender:
    Male
    Здравствуйте, создаю сайт с помощью плагина 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;



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

    Attached Files:

  2.  
  3. Best Answer:
    Post #2 by OlegK, Sep 9, 2020
  4. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Best Answer
    Псевдоклассы CSS
    :nth-child
    odd Все нечетные номера элементов.
    even Все четные номера элементов.
     
    Jevgeni likes this.
  5. Offline

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

    Joined:
    Sep 7, 2020
    Messages:
    2
    Likes Received:
    0
    Gender:
    Male
    Немного изменил предложенный вами вариант
    Код (css):
    1. :nth-child(n)
    где n - порядковый номер элемента
    И желаемый результат был достигнут. Спасибо огромнейшее!
     

Share This Page

Loading...