javascript - 使用 CSS、Javascript 和没有唯一 ID 的 anchor 控制显示/隐藏多个 DIV

Question

我有一个旧的 JavaScript/CSS 文件，它曾经(在当前的浏览器中不再工作)通过 anchor 标记切换多个 div 的显示属性。 CSS document.stylesheets 将根据值“规则”进行切换，这要求样式处于特定顺序以控制“无”到“阻止”切换(或相反)。这是 JSFiddle 示例的链接: JSFiddle

这是 JavaScript:

function NorB(arg){
if (arg=="n") {
    document.styleSheets[0].rules[0].style.display=='block';
    document.styleSheets[0].rules[1].style.display=='none';
} else {
    document.styleSheets[0].rules[0].style.display=='none';
    document.styleSheets[0].rules[1].style.display=='block';
}

这是 HTML:

    <table>
    <tr>
    <td>
    <div class="narrative" id="rpmAct1">
        <div class="buttons">
            <div class="narButton"><a href="javascript: onClick=NorB('n')">Narrative ></a></div>
            <div class="bulButton"><a href="javascript: onClick=NorB('b')">List View ></a></div>
        </div>

        <div class="narrativeContent">
            <div class="n">Narrative text</div>
            <div class="b">
                <ul>
                    <li>List Item A</li>
                    <li>List Item B</li>
                    <li>List ITem C</li>
                </ul>
            </div>
        </div>  
    </div>
    </td>                   
    </tr>

    <tr>
    <td>
    <div class="narrative" id="rpmAct2">
        <div class="buttons">
            <div class="narButton"><a href="javascript: onClick=NorB('n')">Narrative 2></a></div>
            <div class="bulButton"><a href="javascript: onClick=NorB('b')">List View 2></a></div>
        </div>

        <div class="narrativeContent">
            <div class="n">Narrative 2 text</div>
            <div class="b">
                <ul>
                    <li>List 2 Item A</li>
                    <li>List 2 Item B</li>
                    <li>List 2 ITem C</li>
                </ul>
            </div>
        </div>  
    </div>
    </td>                   
    </tr>

</table>

最后，CSS:

        .n {
        display:block;
    }
    .b {
        display:none;
    }
    .b ul {
        margin-left:3px;
        margin-top:0px;
        margin-right:10px;
        margin-bottom:-2px;
    }
    .b ul li {
        list-style-type:square;
        list-style-position:outside;
        line-height:12px;
    }
    .buttons {
        position:relative;
        width:300px;
    }
    .narButton {
        width:80px;
        float:left;
        padding:2px 0px 2px 5px;    
    }
    .bulButton {
        width:80px;
        float:left;
        padding:2px 0px 2px 5px;
    }
    .bulButton a, .narButton a {
        font-size:14px;
        font-style:normal;
        text-decoration:none;
    }
    .narrativeContent {
        border-top:1px solid #CCC;
        border-bottom:1px solid #CCC;
        padding:5px;
    }

由于页面上有大量的div/anchor元素，目标是避免为每个创建唯一的ID，继续使用基本的CSS/JavaScript(避免使用 jQuery 等)。关于如何保持简单的想法？

Answer 1

附加这些 CSS

.b-mode .b, .n-mode.n {
    display:block;
}
.b-mode .n, .n-mode.b {
    display:none;
}

修改点击 Action

<a href="#" onclick="NorB(this,'n')">

修改Javascript

function NorB(e, arg) {
    var wrapper = e.parents('.narrative');
    var rm = arg == 'n' ? 'b' : 'n';
    wrapper.classList.add(arg + '-mode');
    wrapper.classList.remove(rm + '-mode');
}
Object.prototype.parents = function (selector) {
    if (selector.length == 0) return;
    var prefix = selector.substr(0, 1);
    if (prefix != '#' && prefix != '.') return;
    var selector = selector.substr(1);
    var p = this.parentNode;
    while (p !== null) {
        switch (prefix) {
            case "#":
                if (p.getAttribute('id') == selector) return p;
                break;
            case ".":
                if (p.classList.contains(selector)) return p;
                break;
        }
        p = p.parentNode;
    }
    return null;
};

http://jsfiddle.net/ypnospae/