document.getElementById () альтернатива в jQuery

ОНОВЛЕННЯ. Мені шкода, що моя подія була неправильно витлумачена багатьма користувачами. Я постараюся бути більш ясним. Я використовую Drupal, і я створив три плаваючі банери. На першій сторінці є блок (блок1), який відображає один плаваючий банер і після оновлення другий з'являється, а для третього теж. Як написав раніше, ці банери мають маленьку кнопку X, щоб зупинити переповнення. Я зробив цей сценарій одним з банерів, і він чудово працює.

<script language="javascript">
function doexpand() {
    document.getElementById("block1").style.overflow = "visible";
}

function dolittle() {
    document.getElementById("block1").style.overflow = "hidden";
}    
</script>

Реальна проблема полягає в тому, що в категоріях сторінок у мене # block2 і в articles # block3. У цьому блоці відображаються однакові банери. Код працює лише для одного ідентифікатора. У цьому випадку # блок1. document.getElementById не працює для отримання додаткових ідентифікаторів, оскільки я читаю з інших тем.

Я спробував з jQuery з двома ідентифікаторами блоків:

(function ($) {

    function doexpand() {
     $("#block1,#block2").css("overflow","visible");
    }
    function dolittle() {
     $("#block1,#block2").css("overflow","hidden");
    }

    })(jQuery);

Не працює. Відображається firebug/консоль: ReferenceError: doexpand не визначено.

Я спробував з одним блоком за допомогою jQuery, як це:

(function ($) {

        function doexpand() {
         $("#block1").css("overflow","visible");
        }
        function dolittle() {
         $("#block1").css("overflow","hidden");
        }

        })(jQuery);

і відображається однакова помилка.

Примітка. Друпал має іншу упаковку, і це виглядає так:

(function ($) {
        //your existing code
    })(jQuery);
1
Найперший пошук Google дає: stackoverflow.com/questions/4069982/ …
додано Автор codeomnitrix, джерело
Чому, начебто, всі думають, що О.П. дав такий самий ідентифікатор більш ніж одному елементу?
додано Автор Denys Séguret, джерело
Ви ніколи не повинні мати більше одного HTML елемента з тим самим ідентифікатором.
додано Автор Darren Davies, джерело
Будь ласка, виконайте пошук, перш ніж робити повідомлення. Я сподіваюся, що це просто, коли ми зможемо його знайти.
додано Автор Hariharan, джерело
+1, я не бачу жодної причини для стількох голосів, що стримують, це дійсно проблема, і багато хто з них неправильно їх зрозумів.
додано Автор Pranav Singh, джерело
@dystroy Я теж цікаво теж. Я, напевно, отримав багато мінусів.
додано Автор user2519032, джерело

7 Відповіді

Будь ласка, перегляньте jQuery Selectors .

Я думаю, у вашому випадку, краще застосувати стиль за допомогою CSS для декількох елементів. наприклад, :

<script language="javascript">
function doexpand() {
    $('.block').style.overflow="visible";
}
function dolittle() {
    $('.block').style.overflow="hidden" ;
}
</script>

Будь-ласка, додайте class = "block" до всіх блоків, для яких ви бажаєте застосувати цей стиль/функцію, він буде застосовуватися для всіх блоків з блоком CSS класу.

3
додано

Альтернатива для document.getElementById ("an_element"); в jQuery є: $ ("# an_element"); Це буде добре працювати в JQuery, це просто, що jQuery робить речі швидше і менш багатослівним.

1
додано

Дуже просто, насправді, вибір jQuery заснований на css-селектори здебільшого. Ці селектори потім перетворюються на масив об'єктів dom, що перебувають у об'єкті jQuery.

function doexpand() {
 $("#block1").css("overflow","visible");
}
function dolittle() {
 $("#block1").css("overflow","hidden");
}
0
додано

Вищевказаний код ідеально підходить у jQuery (це бібліотека JavaScript).

Якщо ви хочете використовувати більш типовий код jQuery, ви можете зробити це

$('#block1').css('overflow', 'visible');

Ви можете витратити його на кілька ідентифікаторів, як це:

$('#block1, #block2').css('overflow', 'visible');

Ви завжди можете отримати об'єкт DOM з об'єкта jQuery, що означає, що ви могли також адаптувати ваш код для використання селекторів jQuery, використовуючи

$('#block1').get(0).style.overflow="visible";

(цей конкретний приклад не розумний: немає необхідності використовувати jQuery, якщо ви не використовуєте складний селектор або функції jQuery)

0
додано

Ви ніколи не повинні мати більше одного HTML елемента з тим самим ідентифікатором (саме тому document.getElementById повертає лише один елемент)

You can just refeerence block2, block3 directly document.getElementById("block2").style.overflow="hidden" ;

Or use getElementByClassName

var elements = document.getElementsByClassName("yourClass")

Який буде збирати всі елементи з певним класом.

Якщо ви хочете використовувати jQuery , як і інші відповіді, ви можете вказувати, що ви можете збігатися з іменем елемента. Наприклад:

$('div[id^="block"]').css("overflow", "visible");

Це буде відповідати всім елементам div , де їх ID починається з block . Ви також можете використовувати інші символи підстановки, такі як * для вмісту та $ для закінчення з.

0
додано

Ось ваш Javascript-код у jQuery. Я не розумію, що потрібно робити, але ви можете передавати параметри в функції. Приклад під цим кодом.

<script language="javascript">
function doexpand() {
$("#block1").css({'overflow': 'visible'});
}
function dolittle() {
$("#block1").css({'overflow': 'hidden'});
}
</script>

Ось воно

<script language="javascript">
function doexpand(element) {
$("#" + element).css({'overflow': 'visible'});
}
function dolittle(element) {
$("#" + element).css({'overflow': 'hidden'});
}
</script>

Than you could call it like: doexpand("theIDofTheElement");

0
додано

jQuery?

HTML:

<div class="block2"></div>

JS:

function doExpand(selector) {
    if ( $(selector).length ) {
        $(selector).css({'overflow':'visible'});
    }
}

Виклик із селектором не ID буде виглядати так: (синтаксис jQuery): doExpand ('. блок2');

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram