сделать повторение JavaScript для каждой строки в представлении - PullRequest
0 голосов
/ 01 декабря 2011

Я создал представление в Drupal. Я использую JavaScript для изменения CSS в каждой строке. Сценарий выполняется в первой строке, но не вносит изменения в остальные строки в представлении.

Это скрипт:

<script language="javascript" type="text/javascript">

window.onload = floatbr;

function floatbr() {

var f = document.getElementById('firstright') // Get div element
var s = document.getElementById('secondright') // Get div element
var w = document.getElementById('catwrapper') // Get div element
var sh = s.offsetHeight // secondright div height
var wh = w.offsetHeight // catwrapper div height
f.style.height = wh - sh + 'px'; }

</script> 

Я использую его с этой страницы: http://agsone.100webcustomers.com/floatbottom.php

наличие сценария на странице не помогает. наличие сценария в нижнем колонтитуле представления и повторение сценария не работает.

Ссылка на jSfiddle с HTML, CSS и JavaScript следующая: http://jsfiddle.net/YTN3K/.

Ответы [ 2 ]

1 голос
/ 01 декабря 2011

Drupal предоставляет и уже использует jQuery , поэтому вы должны использовать его тоже. Drupal имеет собственный собственный способ управления JavaScript и поставляется с некоторым дополнительным API-интерфейсом JavaScript, главным образом для правильной обработки передачи переменных из PHP в JavaScript, регистрации скрипта для запуска при загрузке страницы и добавления контента и т. Д.

jQuery хорошо документирован и популярен, поэтому легко найти документацию, руководство и инструкции. Его собственная документация страница является хорошим началом. Но это требует базового понимания, что такое документ XHTML и как он структурирован.

0 голосов
/ 01 декабря 2011

Трудно сказать по вашему вопросу и по разметке, с которой вы связались, именно к тому, что вы пытаетесь сделать, поэтому вот некоторая общая информация, которая поможет вам начать работу:

Функция, которую вы используете в настоящее время, getElementById, возвращает единственный элемент: элемент на странице с этим значением id.(id значения должны быть уникальными на странице.)

Для работы с несколькими элементами у вас есть несколько вариантов.Два из самых популярных:

  • Вы можете начать с данного элемента, а затем использовать его childNodes, firstChild, nextSibling и аналогичные свойства для перехода от него к другим элементам поблизости.
  • Вы можете использовать getElementsByTagName (на document или на элементе), чтобы найти все элементы в этом контейнере (в том числе несколько уровней ниже), которые имеют данный тег.Например, document.getElementsByTagName("p") дает вам NodeList из всех абзацев на странице.

Это свойства и методы "DOM" (объектная модель документа), которое является деревом элементов и связанной информации, которую браузер создает при разборе и рендеринге вашего HTML.

Ссылки:

Вотпример, показывающий некоторые базовые операции ( живая копия ):

HTML:

<div id="justOneDiv">I'm the <code>justOneDiv</code> element. I'm unique on the page. JavaScript code on the page turned me red.</div>
<div id="container">I'm a container called "container" with <span>various</span> <code>span</code> elements. <span>Code</span> on the <span>page</span> has made all of the <code>span</code> elements in this container <span>bold</span>.</div>
<div>I'm a container with <span>various</span> <code>span</code> elements. <span>Note</span> that the <code>span</code> elements are <span>not</span> bold, because I'm <span>not</span> in the container above.</div>
<div>I'm a <code>div</code> with no class.</div>
<div class="foo">I'm a <code>div</code> with class "foo". Code on the page turned me blue.</div>
<div class="bar">I'm a <code>div</code> with class "bar". Code on the page turned me green.</div>
<div>Another classless <code>div</code></div>
<div class="foo other">Another "foo", also with class "other"</div>
<div class="bar">Another "bar"</div>
<div>Another classless <code>div</code></div>
<div class="foo">Another "foo"</div>
<div class="bar test">Another "bar", also with class "test"</div>
<div>Another classless <code>div</code></div>
<div class="foo">Another "foo"</div>
<div class="bar">Another "bar"</div>
<div>Another classless <code>div</code></div>
<div class="foo">Another "foo"</div>
<div class="bar">Another "bar"</div>

JavaScript:

(function() {

  hookEvent(window, "load", go);

  function go() {
    var list, index, div, container;

    // Get just the one element, turn it red
    document.getElementById("justOneDiv").style.color = "red";

    // Get the spans within the specific container
    container = document.getElementById("container");
    list = container.getElementsByTagName("span");

    // Loop through making those spans bold
    for (index = 0; index < list.length; ++index) {
      list.item(index).style.fontWeight = "bold";
    }

    // Get a NodeList of all divs on the page
    list = document.getElementsByTagName("div");

    // Loop it, turning "foo"s blue and "bar"s green
    for (index = 0; index < list.length; ++index) {
      div = list.item(index);
      if (/\bfoo\b/.test(div.className)) {
        div.style.color = "blue";
      }
      else if (/\bbar\b/.test(div.className)) {
        div.style.color = "green";
      }
    }
  }

  function hookEvent(element, eventName, handler) {
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") {
      element.addEventListener(eventName, handler, false);
    }
    else if (typeof element.attachEvent !== "undefined") {
      element.attachEvent("on" + eventName, handler);
    }
    else {
      element["on" + eventName] = handler;
    }
  }
})();

Sideпримечание: описанные выше операции можно значительно упростить, используя функциональность, предоставляемую любой приличной библиотекой JavaScript, такой как jQuery , Prototype , YUI , Closure или любой из нескольких других .

Например, используя тот же HTML, вот код JavaScript, использующий jQuery для того же результата ( живая копия ):

jQuery(function($) {

  // Get just the one element, turn it red
  $("#justOneDiv").css("color", "red");

  // Get the spans within the specific container
  // Loop through making those spans bold
  $("#container span").css("font-weight", "bold");

  // Turn all divs with the class "foo" blue
  $("div.foo").css("color", "blue");

  // Turn all divs with the class "bar" green
  $("div.bar").css("color", "green");
});

DOM является официальным API;такие библиотеки, как jQuery, предоставляют альтернативные или улучшенные API.Они очень полезны и эффективны, но я бы порекомендовал иметь некоторое представление о самой DOM, даже если вы используете библиотеку и в конечном итоге редко пишете код непосредственно в DOM API.

...