Darling_lxy 2022-04-23 15:11 采纳率: 71.4%
浏览 34
已结题

jQuery怎么给div点击事件调用函数

<script src="Sortable.js"></script>
<script src="jquery.js"></script>
<body>
        <div id="sotr" class="sotr">
            <a data-index='0' style="background: #aa0000;">1</a>
            <a data-index='1' style="background: #005500;">2</a>
            <a data-index='2' style="background: #aa5500;">3</a>
            <a data-index='3' style="background: #59d57f;">4</a>
            <a data-index='4' style="background: #00ffff;">5</a>
            <a data-index='5' style="background: #ff007f;">6</a>
            <a data-index='6' style="background: #ffff7f;">7</a>
            <a data-index='7' style="background: #5500ff;">8</a>
        </div>
        <div id="click" class="click">提交</div>
        <div id="upset" class="upset">打乱</div>
    </body>
    <script>
        var foo = document.getElementById("sotr");
        Sortable.create(foo, {
            group: "adva"
        });

        function shffle() {
            let array = $('#sotr a')
            let usedIndex = []
            let newArray = []
            let validCount = []

            top:
                while (validCount < array.length) {
                    let index = Math.floor(Math.random() * array.length)
                    if (usedIndex.indexOf(index) > -1) {
                        continue top
                    } else {
                        usedIndex.push(index)
                    }
                    validCount++
                    newArray.push(array[index])
                }
            return newArray
        }
        let newarr = shffle()
        for (let item of newarr) {
            $('#sotr').append(item)
        }
        $('#upset').on('click', shffle)
    </script>

我想达到点击“打乱“DIV执行函数,打乱排序,现在只能刷新打乱

img

  • 写回答

2条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-04-24 10:55
    关注

    点击打乱按钮,需要重新执行这段代码

    
    let newarr = shffle()
                    for (let item of newarr) {
                        $('#sotr').append(item)
                    }
    

    代码修改如下:

    
                var foo = document.getElementById("sotr");
                Sortable.create(foo, {
                    group: "adva"
                });
    
                function shffle () {
                    let array = $('#sotr a')
                    let usedIndex = []
                    let newArray = []
                    let validCount = []
    
                    top:
                    while (validCount < array.length) {
                        let index = Math.floor(Math.random() * array.length)
                        if (usedIndex.indexOf(index) > -1) {
                            continue top
                        } else {
                            usedIndex.push(index)
                        }
                        validCount++
                        newArray.push(array[index])
                    }
                    return newArray
                }
    
                function reset () {
                    let newarr = shffle()
                    for (let item of newarr) {
                        $('#sotr').append(item)
                    }
                }
    
                reset() // 初始执行一次打乱
    
                $('#upset').on('click', reset) // 点击执行一次打乱
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • Anon 2022-04-23 16:25
    关注

    你的shffle函数只产生了新数组,没有刷新界面。

    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月2日
  • 已采纳回答 4月24日
  • 创建了问题 4月23日

悬赏问题

  • ¥15 关于#c++#的问题:c++如何使用websocketpp实现websocket接口调用,求示例代码和相关资料
  • ¥15 51单片机的外部中断,按下按键后不能切换到另一个模式
  • ¥15 java连接sqlserver有问题
  • ¥15 yolov8 如何调cfg参数
  • ¥15 这个四人抢答器代码哪儿有问题?仿真程序怎么写?
  • ¥15 burpsuite密码爆破
  • ¥15 关于#ubuntu#的问题,如何解决?(相关搜索:移动硬盘)
  • ¥15 scikit安装之后import不了
  • ¥15 Ros2编译一个使用opencv的c++节点的时候,报了这个错误,请问怎么解决啊
  • ¥15 人脸识别相关算法 YOLO,AI等