Question

从我的代码片段开始，首先，如果我点击标签为＆＃34的下拉列表中的任何分支;选择分支＆＃34;，那么它将从点击的分支中获取文本（锚点链接，例如Iligan ）然后将标签为＆＃34;选择用户＆＃34;的下拉列表中的所有li隐藏起来。然后显示所有包含名为＆＃34; data-link＆＃34;的数据属性的链接的li。并且其内容与select分支下拉列表当前点击链接的文本相匹配，但遗憾的是无法正常工作，我可以隐藏所有的li但是无法显示那些具有名为＆＃34的数据属性的锚链接的li;数据-link＆＃34;哪个数据链接内容与选择分支下拉列表中当前单击的链接的文本匹配。任何帮助，建议，线索，建议，想法将不胜感激。谢谢！

＆＃13;

//user change pass on user management
    $(".uu .uu_dp a").click(function(e){
        $(this).parents(".uu").find(".unregistered_user").text("User: " + $(this).text());
        $(this).parents(".uu").find(".unregistered_user").attr("data-link", $(this).attr("data-link"));
        bbr = $(this).parents(".uc_header").next().find(".uu_cp_form fieldset");
        $(this).parents(".daselect").next().find("form").slideDown();
        e.preventDefault();
    });
    //u branch on user management
    $(".ub .ub_dp a").click(function(e){
        $(this).parents(".ub").find(".u_branch").text("Branch: " + $(this).text());
        $(this).parents(".ub").find(".u_branch").attr("data-link", $(this).attr("data-link"));
        $(this).parents(".daselect").find(".uu .uu_dp li").hide();
        (this).parents(".daselect").find('.uu .uu_dp li a[data-link="Iligan"]').show;
        e.preventDefault();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="extend clear daselect">
                <div class="btn-group ub align_left margin_right5px">
                    <button type="button" class="btn btn-default u_branch" data-toggle="dropdown">Select branch</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>

                    <ul class="ub_dp dropdown-menu" role="menu">
                            <li><a href="#" data-identity="cp">Iligan</a></li>
                      <li><a href="#" data-identity="cp">Corporate</a></li>
                      <li><a href="#" data-identity="cp">Initao</a></li>
                    </ul>
                </div>
                <div class="btn-group uu align_left">
                  <button type="button" class="btn btn-default unregistered_user" data-toggle="dropdown">Select User</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>

                  <ul class="uu_dp dropdown-menu" role="menu" style="height: 300px;">
                        <li><a href="#" data-id="1" data-link="Iligan">User 1 of Iligan</a></li>
                    <li><a href="#" data-id="2" data-link="Iligan">User 2 of Iligan</a></li>
                    <li><a href="#" data-id="3" data-link="Iligan">User 3 of Iligan</a></li>
                    <li><a href="#" data-id="4" data-link="Corporate">User 1 of Corporate</a></li>
                    <li><a href="#" data-id="5" data-link="Corporate">User 2 of Corporate</a></li>
                    <li><a href="#" data-id="6" data-link="Initao">User 1 of Initao</a></li>
                  </ul>
                </div>
            </div>

＆＃13;

Answer 1

我发现了一些问题，请仔细阅读评论：

<html>
<head>
    <title>My title</title>
    <meta http-equiv="refresh" content="45;URL=http://otherpage.com.br">
</head>
<body>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="extend clear daselect">
        <div class="btn-group ub align_left margin_right5px">
            <button type="button" class="btn btn-default u_branch" data-toggle="dropdown">Select branch</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>

            <ul class="ub_dp dropdown-menu" role="menu">
                <li><a href="#" data-identity="cp">Iligan</a></li>
                <li><a href="#" data-identity="cp">Corporate</a></li>
                <li><a href="#" data-identity="cp">Initao</a></li>
            </ul>
        </div>
        <div class="btn-group uu align_left">
            <button type="button" class="btn btn-default unregistered_user" data-toggle="dropdown">Select User</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>

            <ul class="uu_dp dropdown-menu" role="menu" style="height: 300px;">
                <li><a href="#" data-id="1" data-link="Iligan">User 1 of Iligan</a></li>
                <li><a href="#" data-id="2" data-link="Iligan">User 2 of Iligan</a></li>
                <li><a href="#" data-id="3" data-link="Iligan">User 3 of Iligan</a></li>
                <li><a href="#" data-id="4" data-link="Corporate">User 1 of Corporate</a></li>
                <li><a href="#" data-id="5" data-link="Corporate">User 2 of Corporate</a></li>
                <li><a href="#" data-id="6" data-link="Initao">User 1 of Initao</a></li>
            </ul>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(".uu .uu_dp a").click(function(e){
            $(this).parents(".uu").find(".unregistered_user").text("User: " + $(this).text());
            $(this).parents(".uu").find(".unregistered_user").attr("data-link", $(this).attr("data-link"));
            bbr = $(this).parents(".uc_header").next().find(".uu_cp_form fieldset");
            $(this).parents(".daselect").next().find("form").slideDown();
            e.preventDefault();
        });
        //u branch on user management
        $(".ub .ub_dp a").click(function(e){
            $(this).parents(".ub").find(".u_branch").text("Branch: " + $(this).text());
            $(this).parents(".ub").find(".u_branch").attr("data-link", $(this).attr("data-link"));
            //$(this).attr("data-link") will return undefined as clicked element does not have "data-link" attribute
            $(this).parents(".daselect").find(".uu .uu_dp li").hide();
            $(this).parents(".daselect").find('.uu .uu_dp li a[data-link="Iligan"]').show();
            //a[data-link="This selector needs to be dynamic"]
            e.preventDefault();
        });
    </script>
</body>
</html>

Answer 2

根据Rayon Dabre的回答，我做了一些更正：

将数据链接属性添加到第1个下拉列表的下拉选项
在第二次点击事件处理程序
将下面一行中的硬编码“Iligan”替换为第一个下拉列表中选择的值

$(this).parents(".daselect").find('.uu .uu_dp li a[data-link="' + $(this).attr("data-link") + '"]').parent().show();

代码在这里：

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(function() {
            $(".uu .uu_dp a").click(function(e){
                $(this).parents(".uu").find(".unregistered_user").text("User: " + $(this).text());
                $(this).parents(".uu").find(".unregistered_user").attr("data-link", $(this).attr("data-link"));
                bbr = $(this).parents(".uc_header").next().find(".uu_cp_form fieldset");
                $(this).parents(".daselect").next().find("form").slideDown();
                e.preventDefault();
            });
            //u branch on user management
            $(".ub .ub_dp a").click(function(e){
                $(this).parents(".ub").find(".u_branch").text("Branch: " + $(this).text());
                $(this).parents(".ub").find(".u_branch").attr("data-link", $(this).attr("data-link"));
                //$(this).attr("data-link") will return undefined as clicked element does not have "data-link" attribute
                $(this).parents(".daselect").find(".uu .uu_dp li").hide();
                $(this).parents(".daselect").find('.uu .uu_dp li a[data-link="' + $(this).attr("data-link") + '"]').parent().show();
                //a[data-link="This selector needs to be dynamic"]
                e.preventDefault();
            });
        });
    </script>
</head>
<body>

<div class="extend clear daselect">
<div class="btn-group ub align_left margin_right5px">
    <button type="button" class="btn btn-default u_branch" data-toggle="dropdown">Select branch</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>

    <ul class="ub_dp dropdown-menu" role="menu">
      <li><a href="#" data-identity="cp" data-link="Iligan">Iligan</a></li>
      <li><a href="#" data-identity="cp" data-link="Corporate">Corporate</a></li>
      <li><a href="#" data-identity="cp" data-link="Initao">Initao</a></li>
    </ul>
</div>
<div class="btn-group uu align_left">
  <button type="button" class="btn btn-default unregistered_user" data-toggle="dropdown">Select User</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>

  <ul class="uu_dp dropdown-menu" role="menu" style="height: 300px;">
    <li><a href="#" data-id="1" data-link="Iligan">User 1 of Iligan</a></li>
    <li><a href="#" data-id="2" data-link="Iligan">User 2 of Iligan</a></li>
    <li><a href="#" data-id="3" data-link="Iligan">User 3 of Iligan</a></li>
    <li><a href="#" data-id="4" data-link="Corporate">User 1 of Corporate</a></li>
    <li><a href="#" data-id="5" data-link="Corporate">User 2 of Corporate</a></li>
    <li><a href="#" data-id="6" data-link="Initao">User 1 of Initao</a></li>
  </ul>
</div>
</div>
</body>
</html>

我想说你可以通过保存一些jQuery选择器来进一步改进你的代码，例如下面的代码，你有两个相同的选择器。您可以将其保存为临时变量或链接所有呼叫（请参阅jQuery Chaining）

$(this).parents(".ub").find(".u_branch").text("Branch: " + $(this).text());
$(this).parents(".ub").find(".u_branch").attr("data-link", $(this).attr("data-link"));

Answer 3

尝试将数据属性命名为＆＃34; data-link＆＃34;到每个锚链接的li父级，在ul中有一个＆＃34; uu_dp＆＃34;然后像下面一样更新你的代码。

$(".ub .ub_dp a").click(function(e){
    $(this).parents(".ub").find(".u_branch").text("Branch: " + $(this).text());
    $(this).parents(".ub").find(".u_branch").attr("data-link", $(this).attr("data-link"));
    $(this).parents(".daselect").find(".uu .uu_dp li").hide();
    $(this).parents(".daselect").find('.uu .uu_dp li[data-link="' + $(this).text() + '"]').show();
    e.preventDefault();
});

显示具有锚链接的li，其具有数据属性名称＆＃34; data-link＆＃34;与指定文本匹配

3 个答案: