Question

我开发了script作为模态触发器。

它的作用是：每当用户点击具有类"toggle-feature"的元素时，它就会打开激活一个模态（元素通过data-toggle从中指定）。

例如，如果我点击：

<button class="toggle-feature" data-toggle="random-modal" data-class="custom-class">Test</button>

它应该将类"custom-class"添加到此元素：

<div id="random-modal">Random Modal</div>

到目前为止，它是半预期的。但是，如果该元素应该充当＆＃34;触发器＆＃34;有孩子，其中一个孩子被点击，模态不会被激活。

我尝试了很多方法（包括改变几乎所有代码行），以及e.stopPropagation()和document.querySelectorAll(".toggle-feature, .toggle-feature *")的使用 - 但它们似乎都没有用过。

这是我的（简化和漂亮的） JavaScript ：

// globals
var regex;

// functionality
document.onclick = function(e){ // on document click
    var tf = document.getElementsByClassName("toggle-feature");
    e.stopPropagation(); // does not stop dom bubbling up

    for(var i = 0; i < tf.length; i++){ // iterate through each toggle button

        if(e.target == tf[i]){ // if the element clicked was one of the toggles

            if(tf[i].hasAttribute("data-toggle")){ // if the element has specified a modal to togal
                var modal = document.getElementById(tf[i].getAttribute("data-toggle")); // get the specified modal
                regex = new RegExp("(?:^|\\s)" + (tf[i].hasAttribute("data-class") ? tf[i].getAttribute("data-class") : "active") + "(?!\\S)"); // some regex for targeting a specific class

                if(modal.className.match(regex)){ // if the modal has the "active" class

                    modal.className = modal.className.replace(regex, ""); // remove the class

                } else { // vice versa

                    modal.className = modal.className + " " + (tf[i].hasAttribute("data-class") ? tf[i].getAttribute("data-class") : "active");

                }
            }
        }
    }
}

以下是 JsFiddle （以及所有原始的 JS ，以及一个示例）：https://jsfiddle.net/n8t6u4s6/

Answer 1

我设法找出一个工作解决方案，它利用children和parentNode属性 - 同时定义一个单独的函数来处理激活模态。

这就是我提出的（对于未来可能面临类似问题的任何人）。

function toggleModal(clicked, parent){
    var elem = (parent == undefined ? clicked : parent), 
        regex = new RegExp("(?:^|\\s)" + (elem.hasAttribute("data-class") ? elem.getAttribute("data-class") : "active") + "(?!\\S)"),
        modal;

    if(elem.hasAttribute("data-toggle")){
        modal = document.getElementById(elem.getAttribute("data-toggle"));
        modal.className = (modal.className.match(regex) ? modal.className.replace(regex, "") : modal.className + " " + (elem.hasAttribute("data-class") ? elem.getAttribute("data-class") : "active"));
    } else if(elem.hasAttribute("data-open")){
        modal = document.getElementById(elem.getAttribute("data-open"));
        modal.className = (!modal.className.match(regex) ? modal.className + " " + (elem.hasAttribute("data-class") ? elem.getAttribute("data-class") : "active") : modal.className);
    } else if(elem.hasAttribute("data-close")){
        modal = document.getElementById(elem.getAttribute("data-close"));
        modal.className = (modal.className.match(regex) ? modal.className.replace(regex, "") : modal.className);
    }
}

document.onclick = function(e){
    var tf = document.getElementsByClassName("toggle-feature");
    for(var i = 0; i < tf.length; i++){
        if(e.target == tf[i]){
            toggleModal(tf[i]);
        } else {
            for(var x = 0; x < tf[i].children.length; x++){
                if(e.target == tf[i].children[x]){
                    toggleModal(tf[i].children[x], tf[i]);
                }
            }
        }
    }
}

希望它可以帮助别人！

小提琴：https://jsfiddle.net/n8t6u4s6/15/

目标儿童和父母点击文件onclick无法正常工作

1 个答案: