Добавление элемента массива в существующий тег заголовка в качестве переключателя данных

0

В настоящее время я создаю сайт в expressionengine и хотел бы поместить динамический переток данных в теги заголовков 3, которые также динамически отображаются на веб-странице. Когда пользователь создает "раздел" на веб-сайте, он создает <h3> и <div> который содержит информацию, которую они вводят. Это все работает нормально, однако я хочу применить привязку данных к тегу заголовка 3 с помощью Javascript (и идентификатор в div после его сортировки). Я создал кусок javascript, который следует:

$(function(){
  {exp:channel:entries channel="page" dynamic="yes"}
    var toggles = new Array(
      {body}"{section_title}"{if row_count != total_rows},{/if}{/body}
    );
  {/exp:channel:entries}

  $.each( toggles, function( i, val ) {
    $('.about-content h3').attr("data-toggle", val);
  });
});

В нем есть код выражения, но это, по сути, цикл. Так что происходит, когда цикл захватывает заголовок разделов на веб-странице, а затем plonks int в массив. Все это работает отлично, а выход выглядит следующим образом:

var toggles = new Array("Values","Accreditations","Careers","Downloads");

side note: я собираюсь удалить заглавные буквы и пробелы после сортировки этого бита

Я раньше не использовал массивы в JavaScript/jQuery, поэтому я изо всех сил пытаюсь вывести каждую запись в виде перетаскивания данных для тегов h3, которые динамически генерируются на странице. Теги <h3> уже существуют, поэтому с этой функцией не нужно создавать.

Таким образом, в этом примере будет четыре <h3> в строке. Могу ли я пройти через каждый элемент массива и добавить элемент в каждый <h3> один за другим?

В настоящее время, когда я проверяю элемент с Firebug, он отображает код как таковой:

<h3 data-toggle="Downloads">Values</h3>
<h3 data-toggle="Downloads">Accreditations</h3>
<h3 data-toggle="Downloads">Careers</h3>
<h3 data-toggle="Downloads">Downloads</h3>

Но если я посмотрю на источник, он отображается как:

<h3 data-toggle="">Values</h3>
<h3 data-toggle="">Accreditations</h3>
<h3 data-toggle="">Careers</h3>
<h3 data-toggle="">Downloads</h3>

Любая помощь будет принята с благодарностью.

Спасибо.

  • 0
    Поскольку вы добавляете атрибуты с помощью jQuery, это будет видно при использовании элемента inspect с Firebug, но не с исходным кодом. Поскольку источник показывает, что отображается веб-сервером
  • 0
    Хорошо, это имеет смысл. Спасибо за прояснение этой части :)
Теги:
arrays

1 ответ

0

Мне удалось разобраться с этим, если кому-то это интересно.

$(function(){
  {exp:channel:entries channel="page" dynamic="yes"}
    var toggles = new Array(
      {body}"{section_title}"{if row_count != total_rows},{/if}{/body}
    );
  {/exp:channel:entries}

  $('.about-content h3').each(function(val) {
    $(this).attr("data-toggle" , toggles[val]);
  });
});

Насколько я понимаю (чего я, вероятно, не знаю), я просто говорю для каждого .about-content h3 добавить запись массива в качестве атрибута переключения данных.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню