javascript/css: change display property

-1

Я хочу изменить отображение без документаGetElementById, если возможно, но следующее не работает. HTMLjavascript/css: change display property

<a href="javascript:void();" onclick="toggleFaq('1')">Instructions</a><div id="showfaq1" style="display:none;">Open Box. Remove device. </div>

JavaScript:

function toggleFaq(faqid) { 
//alert(faqid); 
var divname = "showfaq"+faqid; 
//alert(divname); 
divname.style.display="block"; 
}

Может кто-нибудь сказать мне, что я делаю неправильно?

спасибо.

источник

2013-09-20 user1904273

это невозможно. Либо используйте getElementById, getElementByTagName и т. Д., Либо jQuery. – giorgio

Почему вы не хотите использовать хороший способ сделать это и вместо этого использовать неявно связанные встроенные js? –

Если вы предоставите более подробную информацию о том, почему вы не хотите использовать 'getElementById', вы получите лучшие предложения. – Harry

В вашем коде divname есть переменная, содержащая строку "showfaq1", которая не имеет свойства style.

Чтобы изменить стиль элемента вам нужна ссылка на этот элемент, который вы можете получить с помощью document.getElementById(divname):

function toggleFaq(faqid) { 
    //alert(faqid); 
    var divname = "showfaq"+faqid; 
    //alert(divname); 
    document.getElementById(divname).style.display="block"; 
}

Если у вас есть аллергия на document.getElementById, вы можете использовать document.querySelector('[id="' + divname +'"]');, но его поддержка не является так же хорошо, как и первый, и он медленнее.

источник

2013-09-20 11:37:04 pawel

я не могу получить, почему вы не хотите использовать getElementById, но ...

Если у вас есть элементы того, как этот

<a href="javascript:void();" onclick="toggleFaq('1')">Instructions</a> 
<div id="showfaq1" style="display:none;">Open Box. Remove device. </div> 
<a href="javascript:void();" onclick="toggleFaq('2')">Instructions</a> 
<div id="showfaq2" style="display:none;">Open Box. Remove device. </div> 
... 
<a href="javascript:void();" onclick="toggleFaq('N')">Instructions</a> 
<div id="showfaqN" style="display:none;">Open Box. Remove device. </div>

Вы можете использовать

<a href="javascript:void();" onclick="toggleFaq(this)">Instructions</a>

function toggleFaq(obj) { 
    obj.nextElementSibling.style.display = 'block'; 
}

источник

2013-09-20 11:43:51 F0G

Мне лучше пойти на 'nextElementSibling' или проверить' nextSibling.nodeType === 1' –

лучше использовать setAttributes(), 'obj.nextSubling.setAttribute ('style', 'display: block;')'. таким образом вы можете изменить класс или то, что когда-либо .. –

@YuryTarabanko Хорошее предложение. Я обновил код. – F0G

Проводка отдельного ответа так как это не влияет на мою предыдущую. Но вы могли бы сделать базовый механизм без JS вообще, то в случае необходимости использовать одно из решений, JS на основе исправить пунктирными браузеров:

HTML

<a href="#showfaq1">Instructions</a> 
<div id="showfaq1">Open Box. Remove device. </div>

CSS

a + div { display:none; } 
a:focus + div, a + div:target { display:block; }

DEMO

источник

2013-09-20 12:26:11 pawel

javascript/css: change display property

ответ

Смежные вопросы