Question

新手到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);
        }
    };
})();

不确定这是否是正确的方法，我一直在研究其他人的例子

Answer 1

在jQuery中你可以在一行中实现它......

 $(".close-more").on("click",function(){$(this).toggle()})

Answer 2

您在HTML中调用toggle_visibility()与JS中的代码

不匹配

if (cl instanceof Array)

不是true，因此它会切换用 class 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

如何仅定位单击的按钮/ div而不是所有元素

2 个答案: