jquery - 如果子按钮与单击的按钮相同，则更改 div 颜色

Question

我是 Jquery 的新手，我正在使用 .net 组件创建一个组织结构图，该结构图的每个成员都有一个按钮。我想更改包含按钮的 DIV 以及具有相同按钮的任何其他 DIV 的颜色。

例如，在下面的代码中，如果选择了按钮 77770001，那么我想将周围的 DIV rocItemTemplate 更改为不同的颜色，但也希望将具有相同值的子元素的任何其他 div 更改为。任何人都可以帮忙吗？

<div id="RadOrgChart1" class="RadOrgChart RadOrgChart_Default">
<!-- 2012.1.301.40 --><div class="rocViewPort" style="visibility: hidden; width: 800px; ">
    <ul class="rocNodeList rocRootNodeList" style="width: 780px; visibility: visible; ">
        <li class="rocNode rocRootNode" style="width: 770px; "><div class="rocItem rocNoOwnImage">
            <div class="rocItemTemplate">


           <input type="submit" name="ctl43$LinkButtonNode" value="02079891000" id="ctl43_LinkButtonNode" class="middle">

            </div>
        </div><ul class="rocNodeList rocLevel1" style="width: 770px; ">
            <li class="rocNode rocFirst rocLast rocOnly" style="width: 770px; "><div class="rocItem rocNoOwnImage">
                <div class="rocItemTemplate">


           <input type="submit" name="ctl47$LinkButtonNode" value="77770001" id="ctl47_LinkButtonNode" class="middle">

                </div>
            </div><ul class="rocNodeList rocLevel2" style="width: 770px; ">
                <li class="rocNode rocFirst" style="width: 120px; "><div class="rocItem rocNoOwnImage">
                    <div class="rocItemTemplate">


           <input type="submit" value="01494561123" name="ctl51$LinkButtonNode" id="ctl51_LinkButtonNode" class="middle">

                    </div>
                </div><div class="rocNodeLines">
                    <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span>
                </div></li><li class="rocNode" style="width: 120px; "><div class="rocItem rocNoOwnImage">
                    <div class="rocItemTemplate">


           <input type="submit" name="ctl54$LinkButtonNode" value="77770001" id="ctl54_LinkButtonNode" class="middle">

                    </div>
                </div><div class="rocNodeLines">
                    <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span>
                </div></li><li class="rocNode" style="width: 120px; "><div class="rocItem rocNoOwnImage">
                    <div class="rocItemTemplate">


           <input type="submit" name="ctl57$LinkButtonNode" value="77770002" id="ctl57_LinkButtonNode" class="middle">

                    </div>
                </div><ul class="rocNodeList rocLevel3" style="width: 120px; ">
                    <li class="rocNode rocFirst rocLast rocOnly" style="width: 120px; "><div class="rocItem rocNoOwnImage">
                        <div class="rocItemTemplate">


           <input type="submit" name="ctl61$LinkButtonNode" value="0061422226212" id="ctl61_LinkButtonNode" class="middle">

                        </div>
                    </div><div class="rocNodeLines">
                        <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span>
                    </div></li>
                </ul><div class="rocNodeLines">
                    <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span><span class="rocLineDown"><!-- --></span>
                </div></li><li class="rocNode rocLast" style="width: 380px; "><div class="rocItem rocNoOwnImage">
                    <div class="rocItemTemplate">


           <input type="submit" name="ctl64$LinkButtonNode" value="77770003" id="ctl64_LinkButtonNode" class="middle">

                    </div>
                </div><ul class="rocNodeList rocLevel3" style="width: 380px; ">
                    <li class="rocNode rocFirst" style="width: 120px; "><div class="rocItem rocNoOwnImage">
                        <div class="rocItemTemplate">


           <input type="submit" value="0061431540656" name="ctl68$LinkButtonNode" id="ctl68_LinkButtonNode" class="middle">

                        </div>
                    </div><div class="rocNodeLines">
                        <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span>
                    </div></li><li class="rocNode" style="width: 120px; "><div class="rocItem rocNoOwnImage">
                        <div class="rocItemTemplate">


           <input type="submit" value="0061883836198" name="ctl71$LinkButtonNode" id="ctl71_LinkButtonNode" class="middle">

                        </div>
                    </div><div class="rocNodeLines">
                        <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span>
                    </div></li><li class="rocNode rocLast" style="width: 120px; "><div class="rocItem rocNoOwnImage">
                        <div class="rocItemTemplate">


           <input type="submit" value="0061883836255" name="ctl74$LinkButtonNode" id="ctl74_LinkButtonNode" class="middle">

                        </div>
                    </div><div class="rocNodeLines">
                        <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span>
                    </div></li>
                </ul><div class="rocNodeLines">
                    <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span><span class="rocLineDown"><!-- --></span>
                </div></li>
            </ul><div class="rocNodeLines">
                <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span><span class="rocLineDown"><!-- --></span>
            </div></li>
        </ul><div class="rocNodeLines">
            <span class="rocLineHorizontal"><!-- --></span><span class="rocLineUp"><!-- --></span><span class="rocLineDown"><!-- --></span>
        </div></li>
    </ul>
</div><input id="RadOrgChart1_ClientState" name="RadOrgChart1_ClientState" type="hidden">

编辑：

我还应该说，当单击按钮时，所有其他不包含所单击数字的按钮都必须更改为不同的类

Answer 1

这应该可以解决问题：

$('[type="submit"]').click(function() {
    var value = $(this).val();
    $('div:contains([type="submit"][value="' + value + '"])').addClass("yourCssClassSpecifyingTheColor");
});

Answer 2

您可以使用

$('input[value=77770001]').closest('div').css('background-color',"Red");