如何通过另一个点击函数修改目标函数的click data数据？

安全阿岳

2026-8-11

点击按钮时无法修改另一按钮的data-clicks状态

我移除了一个开关式点击函数，现在需要实现点击Account按钮时，修改Documentation按钮的click data数据。尝试过给变量clicks1加1、修改关联数据等方法，但都没生效，怀疑代码有隐藏问题，原以为修改变量就能解决，实际没效果。

相关代码

CSS

#doc {
    position: absolute;
    font-family: 'Verdana';
    z-index: 3;
    color: #0088ff;
    font-size: 20px;
    outline: none;
    border: none;
    background-color: transparent;
    left: 100px;
    top: 22px;
    font-weight: bold;
    cursor: pointer;
}

#docWindow {
    position: absolute;
    z-index: 2;
    width: 250px;
    height: 295px;
    background-color: #272727;
    top: 65px;
    left: 78px;
    border-top-left-radius: 10px;
    border: 1px solid #1F1F1F;
    border-bottom-left-radius: 10px;
}

#bar {
    position: absolute;
    z-index: 3;
    width: 250px;
    height: 5px;
    top:0px;
    background-color: #0088ff;
    border-top-left-radius: 10px;
}

#html {
    position: relative;
    color:#0088ff;
    font-size: 10;
    font-family: 'Verdana';
    user-select: none;
    font-weight: bold;
    left: 50px;
    top: 100px;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

#acc {
position: absolute;
color: #0088ff;
outline: none;
border: none;
background: transparent;
font-size: 20px;
z-index: 3;
left: 330px;
font-weight: bold;
cursor: pointer;
font-family: 'Verdana';
top: 22px;
}

#accWindow {
position: absolute;
z-index: 2;
width: 250px;
height: 190px;
background-color: #272727;
top: 65px;
left: 265px;
border: 1px solid #1F1F1F;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
display: block;
}

#bar2 {
position: absolute;
z-index: 3;
width: 250px;
height: 5px;
top:0px;
background-color: #0088ff;
border-top-left-radius: 10px;
}

#change {
position: relative;
color:#0088ff;
font-size: 11;
z-index: 3;
font-family: 'Verdana';
user-select: none;
font-weight: bold;
top: 25px;
left: 45px;
outline: none;
border: none;
cursor: pointer;
background-color: transparent;
}

#change2 {
position: relative;
color:#0088ff;
font-size: 10;
z-index: 3;
font-family: 'Verdana';
user-select: none;
font-weight: bold;
top: 65px;
left: 45px;
outline: none;
border: none;
cursor: pointer;
background-color: transparent;
}

#out {
position: relative;
color:#0088ff;
font-size: 10;
z-index: 3;
font-family: 'Verdana';
user-select: none;
font-weight: bold;
top: 125px;
left: -75px;
outline: none;
border: none;
cursor: pointer;
background-color: transparent;
}
#css {
    position: relative;
    color:#0088ff;
    font-size: 10;
    font-family: 'Verdana';
    user-select: none;
    font-weight: bold;
    left: 50px;
    top: 150px;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
}
#ICON2 {
position: absolute;
font-family: 'Verdana';
z-index: 3;
color: #0088ff;
font-size: 20px;
outline: none;
border: none;
background-color: transparent;
left: 100px;
top: 2px;
font-weight: bold;
cursor: pointer;
}

#java {
    position: relative;
    color:#0088ff;
    font-size: 10;
    font-family: 'Verdana';
    user-select: none;
    font-weight: bold;
    left: 50px;
    top: 201px;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

#jquery {
    position: relative;
    color:#0088ff;
    font-size: 10;
    font-family: 'Verdana';
    user-select: none;
    font-weight: bold;
    left: 50px;
    top: 253px;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

#lua {
    position: relative;
    color:#0088ff;
    font-size: 10;
    font-family: 'Verdana';
    user-select: none;
    font-weight: bold;
    left: 50px;
    top: 305px;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

#ICON1 {
    position: absolute;
    font-family: 'Verdana';
    z-index: 3;
    color: #0088ff;
    font-size: 20px;
    outline: none;
    border: none;
    background-color: transparent;
    left: 180px;
    top: 2px;
    font-weight: bold;
    cursor: pointer;
}

.FLIP1 {
    transform: rotateX(180deg);
    transition-duration: 0.2s;
}

.FLIP2 {
    transform: rotateX(180deg);
    transition-duration: 0.2s;
}

a {
   color: #0088ff;
   text-decoration: none;
}

a:hover {
   color: #0056A3;
   text-decoration: none;
}

HTML与JavaScript

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src="https://kit.fontawesome.com/b3dcbaf5bd.js" crossorigin="anonymous"></script>
<div id = "documentation">
                <button id = "doc">Documentation<div id = "ICON1"><i class = "fa-solid fa-angle-down"></i></div></button>
                <div id = "docWindow" style="display:none;"><div id = "bar"></div>
                    <button id = "html"><a href = "/Users/1001891/Desktop/webVar/Content/DocOverview/HTMLDoc/htmlDocumentation.html">HTML Docs</a></button>
                    <button id = "css"><a href = "/Users/1001891/Desktop/webVar/Content/DocOverview/CSSDoc/CSSdocumentation.html">CSS Docs</a></button>
                    <button id = "java"><a href = "/Users/1001891/Desktop/webVar/Content/DocOverview/JSDoc/javascriptdocumentation.html">Java Docs</a></button>
                    <button id = "jquery"><a href = "/Users/1001891/Desktop/webVar/Content/DocOverview/JQUDoc/jquerydocumentation.html">Jquery Docs</a></button>
                    <button id = "lua"><a href = "/Users/1001891/Desktop/webVar/Content/DocOverview/LUADoc/luadocumentation.html">Lua Docs</a></button>
                </div>
                <script>   
                    var clicks1 = undefined;

                    $('#doc').click(function() {
                        clicks1 = $(this).data('clicks');
                        if (!clicks1) {
                            $("#ICON1").toggleClass("FLIP1");
                            $('#docWindow').show();
                        } else {
                            $('#docWindow').css('display', 'none');
                            $("#ICON1").toggleClass("FLIP1");
                        }
                        $(this).data("clicks", !clicks1);
                        $('#accWindow').hide();
                    });
                </script>
            </div>
<div id = "account">
            <button id = "acc">Account<div id = "ICON2"><i class = "fa-solid fa-angle-down"></i></div></button>
                <div id = "accWindow" style="display:none;"><div id = "bar2"></div>
                    <button id = "change"><a href = "/Users/1001891/Desktop/webVar/Content/ACC/changeAcc/settings.html">Change Settings</a></button>
                    <button id = "change2"><a href = "/Users/1001891/Desktop/webVar/Content/ACC/changeAcc/acc.html">Change Account</a></button>
                    <button id = "out"><a href = "/Users/1001891/Desktop/webVar/Content/ACC/changeAcc/out.html">Log Out</a></button>
                </div>
                    <script>          
                        var display = $("#docWindow").is(':visible');

                        setInterval(function(){
                            display = $("#docWindow").is(':visible');
                            $(function() {
                                if (display === true) {
                                    display = 1;
                                    console.log(display);
                                };

                                if (display === false) {
                                    display = 2;
                                    console.log(display);
                                };
                            });
                        }, 10);

                        $('#acc').click(function() {
                            if(display == 1) {
                                $('#docWindow').css('display', 'none');
                                $("#ICON1").toggleClass("FLIP1");
                                clicks1 = clicks1+1;
                            };
                    
                            var clicks2 = $(this).data('clicks');
                            if (!clicks2) {
                                $('#accWindow').show();
                                $("#ICON2").toggleClass("FLIP1");
                            } else {
                                $('#accWindow').hide();
                                $("#ICON2").toggleClass("FLIP1");
                            };
                            $(this).data("clicks", !clicks2);
                        });
                    </script>  
        </div>

问题分析

变量与data属性不同步：你修改的clicks1只是局部变量，Documentation按钮的状态实际存在$(this).data('clicks')里，修改clicks1不会同步到按钮的data属性，下次点击时会重新读取原始值，导致修改无效。
冗余轮询无意义：用setInterval每10毫秒判断窗口状态完全没必要，点击Account按钮时直接实时判断即可，轮询只会浪费性能。
状态切换逻辑混乱：关闭Documentation窗口时，只修改了窗口显示和图标类，但没同步更新按钮的data状态，导致下次点击Documentation按钮时逻辑出错。

修复方案

修改后的完整代码

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src="https://kit.fontawesome.com/b3dcbaf5bd.js" crossorigin="anonymous"></script>
<div id="documentation">
    <button id="doc">Documentation<div id="ICON1"><i class="fa-solid fa-angle-down"></i></div></button>
    <div id="docWindow" style="display:none;">
        <div id="bar"></div>
        <button id="html"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/HTMLDoc/htmlDocumentation.html">HTML Docs</a></button>
        <button id="css"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/CSSDoc/CSSdocumentation.html">CSS Docs</a></button>
        <button id="java"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/JSDoc/javascriptdocumentation.html">Java Docs</a></button>
        <button id="jquery"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/JQUDoc/jquerydocumentation.html">Jquery Docs</a></button>
        <button id="lua"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/LUADoc/luadocumentation.html">Lua Docs</a></button>
    </div>
</div>
<div id="account">
    <button id="acc">Account<div id="ICON2"><i class="fa-solid fa-angle-down"></i></div></button>
    <div id="accWindow" style="display:none;">
        <div id="bar2"></div>
        <button id="change"><a href="/Users/1001891/Desktop/webVar/Content/ACC/changeAcc/settings.html">Change Settings</a></button>
        <button id="change2"><a href="/Users/1001891/Desktop/webVar/Content/ACC/changeAcc/acc.html">Change Account</a></button>
        <button id="out"><a href="/Users/1001891/Desktop/webVar/Content/ACC/changeAcc/out.html">Log Out</a></button>
    </div>
</div>
<script>
    // Documentation按钮点击逻辑
    $('#doc').click(function() {
        const $docBtn = $(this);
        const isOpen = $docBtn.data('clicks');
        
        if (!isOpen) {
            $("#ICON1").addClass("FLIP1");
            $('#docWindow').show();
        } else {
            $('#docWindow').hide();
            $("#ICON1").removeClass("FLIP1");
        }
        $docBtn.data("clicks", !isOpen);
        
        // 点击Documentation时关闭Account窗口并重置状态
        $('#accWindow').hide();
        $("#ICON2").removeClass("FLIP1");
        $('#acc').data("clicks", false);
    });

    // Account按钮点击逻辑
    $('#acc').click(function() {
        const $accBtn = $(this);
        const $docBtn = $('#doc');
        const isDocWindowOpen = $('#docWindow').is(':visible');
        
        // 如果Documentation窗口打开，关闭并同步按钮状态
        if (isDocWindowOpen) {
            $('#docWindow').hide();
            $("#ICON1").removeClass("FLIP1");
            $docBtn.data("clicks", false); // 直接修改按钮的data状态
        }

        // 处理Account自身的开关逻辑
        const isAccOpen = $accBtn.data('clicks');
        if (!isAccOpen) {
            $('#accWindow').show();
            $("#ICON2").addClass("FLIP1");
        } else {
            $('#accWindow').hide();
            $("#ICON2").removeClass("FLIP1");
        }
        $accBtn.data("clicks", !isAccOpen);
    });
</script>

关键修改点

移除了setInterval轮询，改为点击Account按钮时实时判断Documentation窗口状态，避免性能浪费。
关闭Documentation窗口时，直接通过$docBtn.data("clicks", false)修改按钮的data属性，确保状态同步。
将toggleClass替换为addClass/removeClass，明确状态切换逻辑，避免重复切换导致的混乱。
点击Documentation按钮时，同步重置Account按钮的状态，保证两个按钮的交互一致性。

内容的提问来源于stack exchange，提问作者WebVar

如何通过另一个点击函数修改目标函数的click data数据？

相关代码 #

CSS #

HTML与JavaScript #

问题分析 #

修复方案 #

修改后的完整代码 #

关键修改点 #

相关代码

CSS

HTML与JavaScript

问题分析

修复方案

修改后的完整代码

关键修改点