Можно ли использовать javascript show / hide, чтобы показать 2 элемента одной и той же командой onclick? - PullRequest
Новая
       19

Можно ли использовать javascript show / hide, чтобы показать 2 элемента одной и той же командой onclick?

0 голосов
/ 03 апреля 2012

Следующий скрипт является базовым JavaScript для отображения / скрытия элементов. У меня вопрос, могу ли я показать 2 элемента с той же функцией onclick? Возможно ли это, и если да, то как мне написать свой код, чтобы он работал, потому что ни один из моих вариантов не сработал? Большое спасибо заранее! 

<script type="text/javascript">

    function showStuff(id) {
        document.getElementById(id).style.display = 'block';
    }
    function hideStuff(id) {
        document.getElementById(id).style.display = 'none';
    }

    </script>

    <a href="#" onclick= "{black1(); red1();}; {showStuff('character1', 'character1-img');   hideStuff('character2');}">1</a>

Ответы [ 4 ]

0 голосов
/ 03 апреля 2012

Вы можете делать что-либо в JavaScript до тех пор, пока это не допустимый JavaScript.

У вас может быть одна функция, скажем onAnchorClick, которую можно вызывать по щелчку якоря и передавать элементы для отображения / скрытия какмассив затем выполнить вашу логику внутри этой функции. 

<a href="#" onclick= "onAnchorClick(['character1', 'character1-img'], ['character2']);">1</a>

Js 

function onAnchorClick(elementsToShow, elementsToHide){
    //do stuff here       
    black1();
    red1();

    if(elementsToShow){ 
        showStuff(elementToShow);
    }
    if(elementsToHide){ 
        hideStuff(elementToShow);
    }
}
function showStuff(ids) {
    for (var i = 0; i < ids.length; i++)
       document.getElementById(id[i]).style.display = 'block';
    }
}
function hideStuff(ids) {
    for (var i = 0; i < ids.length; i++)
       document.getElementById(ids[i]).style.display = 'none';
    }
}
0 голосов
/ 03 апреля 2012 
function showStuff(id) {
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById( args.pop() ).style.display = 'block';
    if ( args.length ) showStuff.apply(null, args);
}​

Эта функция будет рекурсивно вызывать себя, когда вы передадите несколько идентификаторов, показывая каждый элемент до тех пор, пока не останется ни одного.

Вы бы использовали его так: showStuff('firstID', 'secondID', 'thirdID') (это то, что вы 'Вы уже делаете в вашем примере).

http://jsfiddle.net/kennis/vg9Z4/

0 голосов
/ 03 апреля 2012

Вы можете попробовать это: 

<a href="#" onclick= "black1();red1();showStuff('character1');showStuff('character1-img');hideStuff('character2');">1</a>

Но вам лучше иметь что-то вроде: 

<a href="#" onclick= "clickedLink123();">1</a>

С этим в вашем сценарии: 

function clickedLink123() {
    black1();
    red1();
    showStuff('character1');
    showStuff('character1-img');
    hideStuff('character2');
}
0 голосов
/ 03 апреля 2012

Передайте массив как аргумент, а не один идентификатор, и просто переберите идентификаторы, показывая / скрывая каждый из них. Что-то вроде 

function showStuff(ids) {
    var len = ids.length,
        id;

    for (var i = 0; i < len; i++){ 
       id = ids[i];
       document.getElementById(id).style.display = 'block';
    }    
}
...