Question

我正在学习JavaScript，并且不确定如何处理简单的可重用代码片段。

我需要的是一段代码隐藏（）＃body01，＃body02，＃body03,04,05等（所有这些）。然后，当我点击title01时，它理解我想要切换（）body01。如果我单击title02，它将切换（）body02，依此类推。

<a id="title01">Title 1</a>
<div id="body01">Body content for Title 1</div>

<a id="title02">Title 2</a>
<div id="body02">Body content for Title 2</div>

<a id="title03">Title 3</a>
<div id="body03">Body content for Title 3</div>

对不起，如果有人问这个问题，我一直无法找到它，也不能自己解决。

谢谢！

Answer 1

如果你使用jQuery（如果没有，你应该），它就像这样简单：

$('[id^=title]').click(function(){

    var tmp = $(this).attr('id').split("title");
    $('#body'+tmp[1]).toggle();

});

Answer 2

您可以使用toggle方法使用jQuery执行此操作：

$(function(){
  $("[id^=title]").click(function(){
    $(this).next().toggle();
    return false; // prevent moving down or going to link
  });
});

Answer 3

新的JS开发人员往往直接使用jQuery而不首先学习JavaScript作为语言。你绝对应该至少学习一些普通的JavaScript，以便你能够更好地理解和使用jQuery的强大功能。切换的最佳方法是设置和删除类，而不是在元素上设置样式属性。这就是说你可以做这样的事情。

.hidden {display：none; }

    <div>
        <a id="title01" class="toggler">Title 1</a>
        <div class="body" id="body01">Body content for Title 1</div>

        <a id="title02" class="toggler">Title 2</a>
        <div class="body" id="body02">Body content for Title 2</div>

        <a id="title03" class="toggler">Title 3</a>
        <div class="body" id="body03">Body content for Title 3</div>
    </div>

    <script>
        // set your initial variables
        // ideally you will put these in a function which is not
        // exposed to the global object
        var togglers = document.getElementsByTagName('a'),
            divs   = document.getElementsByTagName('div'),
            i, j;

        // here you loop through your a elements and if they have
        // a class of toggler you assign the onclick event to a toggle function
        for ( i = 0; i < togglers.length; i += 1) {
            if (togglers[i].className == 'toggler') {
                togglers[i].onclick = toggle;
            }
        }

        function toggle() {
            // here you will cache the variable toToggle
            // which is the div you want to toggle
            var toToggle;

            // loop through all divs and if they have a class of body
            // you hide it
            for (j = 0; j < divs.length; j += 1) {
                if (divs[j].className == 'body') {
                    divs[j].className += ' hidden';

                    // this is tricky for a beginner. nodeType 1 is an element node
                    // nextSibling will get the nextSibling but if there is white space
                    // in your document it will return a text node when you have to toggle
                    // an element node. this just ensures that it will keep going until it
                    // finds and element node
                    if (this.nextSibling.nodeType !== 1) {
                        toToggle = this.nextSibling.nextSibling;
                    }
                    // then you toggle it by removing the hidden class
                    toToggle.className = 'body';
                }
            }
        }

    </script>
</body>

以下是一些引用nodeType和下一个兄弟的链接。 https://developer.mozilla.org/en/nodeType

https://developer.mozilla.org/En/DOM/Node.nextSibling

Answer 4

向DOM元素添加类，如下所示：

<a class="title" id="title01" href="">Title 1</a>
<div class="body" id="body01">Body content for Title 1</div>

<a class="title" id="title02" href="">Title 2</a>
<div class="body" id="body02">Body content for Title 2</div>

<a class="title" id="title03" href="">Title 3</a>
<div class="body" id="body03">Body content for Title 3</div>

然后你可以像这样添加切换功能：

$('.title').click(function(e){
    e.preventDefault();
    $(this).next('.body').toggle();
});

以下是accordion like jQuery functionality

的演示

简单的可重用JavaScript toggle（）脚本？

4 个答案: