Question

有没有更简单的方法在dojo中编写这样的东西（而不是为每个我要显示或隐藏的东西设置一个函数）？我知道必须有办法避免这种重复，但我不知道该怎么做。

on(dom.byId("thing_toggle2"), "click", function(){
    if(thing_list2.style.display == "none") {
        thing_list2.style.display = "block";
        dom.byId("toggle2_sign").innerHTML = "(-)";
    } else {
        thing_list2.style.display = "none";  
        dom.byId("toggle2_sign").innerHTML = "(+)";   
    };
});

on(dom.byId("thing_toggle3"), "click", function(){
    if(thing_list3.style.display == "none") {
        thing_list3.style.display = "block";
        dom.byId("toggle3_sign").innerHTML = "(-)";
    } else {
        thing_list3.style.display = "none";  
        dom.byId("toggle3_sign").innerHTML = "(+)";   
    };
});

Answer 1

我没有对此进行测试，但它应该给你一个起点。添加一个额外的部分，只需要添加到数据数组。

var fnToggle = function(nodeMap) {
    var expand = domStyle.get(dom.byId(nodeMap.contentNode), 'display') == 'none';
    domStyle.set(dom.byId(nodeMap.contentNode), 'display', expand ? 'block' : '');
    html.set(dom.byId(nodeMap.expandoNode), expand ? '+' : '-');
};

var nodes = [
  { eventNode: 'thing_toggle2', contentNode: thing_list2, expandoNode: 'toggle2_sign' },
  { eventNode: 'thing_toggle3', contentNode: thing_list3, expandoNode: 'toggle3_sign' }
];

array.forEach(nodes, function(nodeMap) {
    on(dom.byId(nodeMap.eventNode), "click", function(){ fnToggle(nodeMap); });
});

// domStyle -> dojo/dom-style
// html     -> dojo/html
// array    -> dojo/_base/array

Answer 2

您可以使用dojo/fx/Toggler使用dojo/_base/fx.fadeOut和dojo/_base/fx.fadeIn

Answer 3

我实际上决定将此作为一个普通的旧javascript函数，我可以在其他地方重用，包括可能不需要dojo的页面。像这样：

<a href="#" onclick="javascript:showlayer('myName');return false;">[1]</a>
<a href="#" onclick="javascript:showlayer('anothername');return false;">[2]</a>

<div id="myName" style="display:none;">Antonio</div>
<div id="anothername" style="display:none;">Elliot</div>

<script type="text/javascript">
function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
    document.getElementById(layer).style.display="block";
    } else {
    document.getElementById(layer).style.display="none";
};

}
</script>

道场 - 不要重复自己

3 个答案: