Как настроить таргетинг только на нажатую кнопку/div, а не на все элементы

Новичок в Javascript здесь. У меня есть код html/php. Что происходит прямо сейчас, так это то, что когда я нажимаю кнопку, отображаются все элементы, а не только целевой элемент. любая помощь наиболее ценится

HTML/PHP

<div class="te contentDiv">
<div class="myContent" style="display:none">
<?=$text?>
<a id="close_btn"     
href="javascript:toggle_visibility('myContent','close_btn','open_btn');"
class="close-more"><?=localised_string('Close')?></a>
</div>    
</div>

JavaScript

    var toggle_visibility = (function () {

    function toggle(cl) {

        var els = document.getElementsByClassName(cl);

        for (var i = 0; i < els.length; i++) {
            var s = els[i].style;
            s.display = s.display === 'none' ? 'block' : 'none';
        };
    }
    return function (cl) {

        if (cl instanceof Array) {

            for (var i = 0; i < cl.length; i++) {   
                toggle(cl[i]);
            }

        } else { 
            toggle(cl);
        }
    };
})();

Не уверен, что это правильный способ сделать это, я работал с примерами других людей.


javascript show-hide target elements
person Zinox    schedule 15.04.2014    source источник
comment
Ваш код очень странный, потому что он смешивает идентификаторы и атрибуты класса и перебирает все объявленные элементы, всегда переключая каждый из них для каждого вызова.   -  person Thomas Urban    schedule 15.04.2014

Ответы (2)


arrow_upward
0
arrow_downward

Ваш вызов toggle_visibility() в HTML не соответствует коду в JS для

if (cl instanceof Array)

не true, поэтому он переключает все кнопки, объявленные с классом myContent. cl в функции, возвращаемой из toggle_visibility(), является первым аргументом вызова, который в вашем случае равен 'myContent'. Но я думаю, вы хотите либо использовать arguments, а не cl, либо обернуть список имен в массив при вызове следующим образом:

toggle_visibility( [ 'myContent', 'close_btn', 'open_btn' ] );

Но это, тем не менее, не решит вашу проблему.

Как насчет обработчика кликов:

function toggle_visibility(event) {
    event.target.style.display = window.getComputedStyle(event.target, null).style == 'none' ? 'block' : 'none';
    return false;
}

Примечание: см. https://developer.mozilla.org/en-US/docs/Web/API/event.target

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

<a href="#" onclick="toggle_visibility();">Link</a>

См. также этот пример: https://developer.mozilla.org/en-US/docs/Web/API/event.currentTarget

person Thomas Urban    schedule 15.04.2014
comment
Я попробую и вернусь. - person Zinox; 15.04.2014
comment
Кто-то еще поиграл со мной в этот файл. Он немного запутался, я просто пытаюсь открыть кнопку -> показать div -> закрыть кнопку -> скрыть div, но в данный момент он просто выбирает все, чтобы открыть - все, чтобы закрыть (новичок просто изучаю JS) - person Zinox; 15.04.2014
comment
Новичком быть не стыдно... Javascript иногда трудно понять и опытным кодерам. Однако ваш первоначально опубликованный код не является простым javascript, а использует довольно сложные подходы к ограничению областей переменных, возврату функций для вызова, автоматическому обнаружению различных типов переданных параметров и т. д. Это довольно много для новичка... - person Thomas Urban; 15.04.2014
comment
Я знаю, что это сводит меня с ума, но спасибо за помощь, очень признательна - person Zinox; 15.04.2014

arrow_upward
0
arrow_downward

В jQuery вы можете добиться этого в одной строке...

 $(".close-more").on("click",function(){$(this).toggle()})
person Gumbo    schedule 15.04.2014
comment
Я не вижу никакого jQuery в сообщении выше. - person Thomas Urban; 15.04.2014
comment
@cepharum У меня нет Jquery, это файл другого человека - person Zinox; 15.04.2014
comment
Я видел это, только предложение. - person Gumbo; 15.04.2014