Question

我有一个简单的界面，允许用户动态添加元素并拖动它们。但我需要添加一个功能，显示给用户选择的元素。当用户点击另一个元素时，必须取消选择所有其他元素......

我创建了一个简单的函数，它为元素带来了一个特殊的CSS类，用户选择，但我不明白，当用户选择另一个时，如何从所有其他动态添加的元素中删除该类。

我在jQuery中找到了一些解决方案，但我需要用纯JS编写它。

我该怎么办？它必须是某种循环功能吗？

我的模板：

    <head>
        <title>Int Demo</title>
        <script src='js/jquery.js'></script>
        <script src='js/jquery-ui.min.js'></script>
        <script src='js/script.js'></script>
        <style type="text/css">
            .button {width: 100px; height: 20px; background: #A3A1A1; text-align: center; font-size: 12px; color: #ffffff; padding-top: 6px; cursor: pointer;}
            .wrapper {width: 800px; height: 300px; background: #D4D1D1; position: relative;}
            .textblock {cursor: pointer; position: absolute; left: 5%; top: 5%;}
            .selected {border: 1px solid red;}
        </style>
    </head>

    <body>
        <div class="button" id="button">Add Textbox</div>
        <div class="wrapper" id="wrapper"></div>
    </body>

</html>

我的JS：

document.addEventListener("DOMContentLoaded", function() { init(); }, false);

function init() {

    button = document.getElementById('button');
    wrapper = document.getElementById('wrapper');

    button.addEventListener('click', btnClick, false);
    document.addEventListener('mousedown', selector, false);

    function selector(e) {
        var select = e.target;
        if (select.classList.contains('draggable')) {
            select.classList.add('selected');
        };
        console.log(select);
    };


    function btnClick() {
        wrapper.innerHTML += '<p class="draggable textblock">Text Here!</p>';
    };

}

Answer 1

找到元素[s]并删除它们

如果只有一个，则在添加另一个之前删除该类。

document.querySelector(".selected").classList.remove('selected');

单击另一个元素时取消选择元素

1 个答案: