首页 \ 问答 \ 触发容器onclick(Trigger container onclick)

触发容器onclick(Trigger container onclick)

我需要重写以下代码,以便当您单击“next”按钮或其他内容时,将打开下一个容器并关闭当前容器。 同样的事情是按钮“返回”。

不幸的是,我不知道如何重写代码来获得想要的结果,因为我的偏好在后端最多,我仍然是JavaScript和jQuery的新手。

这是我现在的代码:

    $(document).ready(function() {
        $('.trigger').not('.trigger_active').next('.toggle_container').hide();
        $('.trigger').click(function() {
            var trig = $(this);

            if(trig.hasClass('trigger_active')) {
                trig.next('.toggle_container').slideToggle(500);
                trig.removeClass('trigger_active');
            } else {
                $('.trigger_active').next('.toggle_container').slideToggle(500);
                $('.trigger_active').removeClass('trigger_active');
                trig.next('.toggle_container').slideToggle(500);
                trig.addClass('trigger_active');
            };
        return false;
        });
    });

和班级:

    <div class="trigger">
        <table width="385px" cellspacing="5px" style="border: 1px solid #FFFFFF;">
            <tr>
                <th align="left">User Information</th>
                <th align="right"><font size="1">(click to expand)</font></th>
            </tr>
        </table>
    </div>
    <div class="toggle_container">
        <table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;">
            <tr>
                <td align="left">Username<font color="#8E6516">*</font></td>
                <td align="right"><input name="username" id="username" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Benutzername" required="required" /></td>
            </tr>
            <tr>
                <td align="left">Password<font color="#8E6516">*</font></td>
                <td align="right"><input name="password" id="password" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Mindestens 6 Zeichen" required="required" /></td>
            </tr>
            <tr>
                <td align="left">Password<font color="#8E6516">*</font></td>
                <td align="right"><input name="confirmpwd" id="confirmpwd" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Passwort wiederholen" required="required" /></td>
            </tr>
            <tr>
                <td align="left">E-Mail<font color="#8E6516">*</font></td>
                <td align="right"><input name="email" id="email" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="E-Mail Adresse" required="required" /></td>
            </tr>
            <tr>
                <td align="left"><input name="back" type="button" value="Back" style="background: transparent; border-color: #8E6516; color: #FFFFFF; width: 135px;" /></td>
                <td align="right"><input type="button" name="next" value="Next" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" /></td>
            </tr>
        </table>
    </div>

I need to rewrite the following code so that when you click on button "next" or something, the next container opens and the current one closes. The same thing goes for the button "back".

Unfortunately I don't know exactly how to rewrite the code to get the wanted result, because my preferences lie the most in backend and I'm still pretty new to JavaScript and jQuery.

Here's my current code:

    $(document).ready(function() {
        $('.trigger').not('.trigger_active').next('.toggle_container').hide();
        $('.trigger').click(function() {
            var trig = $(this);

            if(trig.hasClass('trigger_active')) {
                trig.next('.toggle_container').slideToggle(500);
                trig.removeClass('trigger_active');
            } else {
                $('.trigger_active').next('.toggle_container').slideToggle(500);
                $('.trigger_active').removeClass('trigger_active');
                trig.next('.toggle_container').slideToggle(500);
                trig.addClass('trigger_active');
            };
        return false;
        });
    });

And the class:

    <div class="trigger">
        <table width="385px" cellspacing="5px" style="border: 1px solid #FFFFFF;">
            <tr>
                <th align="left">User Information</th>
                <th align="right"><font size="1">(click to expand)</font></th>
            </tr>
        </table>
    </div>
    <div class="toggle_container">
        <table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;">
            <tr>
                <td align="left">Username<font color="#8E6516">*</font></td>
                <td align="right"><input name="username" id="username" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Benutzername" required="required" /></td>
            </tr>
            <tr>
                <td align="left">Password<font color="#8E6516">*</font></td>
                <td align="right"><input name="password" id="password" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Mindestens 6 Zeichen" required="required" /></td>
            </tr>
            <tr>
                <td align="left">Password<font color="#8E6516">*</font></td>
                <td align="right"><input name="confirmpwd" id="confirmpwd" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Passwort wiederholen" required="required" /></td>
            </tr>
            <tr>
                <td align="left">E-Mail<font color="#8E6516">*</font></td>
                <td align="right"><input name="email" id="email" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="E-Mail Adresse" required="required" /></td>
            </tr>
            <tr>
                <td align="left"><input name="back" type="button" value="Back" style="background: transparent; border-color: #8E6516; color: #FFFFFF; width: 135px;" /></td>
                <td align="right"><input type="button" name="next" value="Next" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" /></td>
            </tr>
        </table>
    </div>

原文:https://stackoverflow.com/questions/40320411
更新时间:2023-07-11 06:07

最满意答案

这将从搜索结果中排除名称在exclude_dirs_list中的所有目录。 实际上,名称不是完整路径,因此不仅会排除/ a / b / c / dir1,还会排除/ a / b / c / d / e / dir1。

proc rglob { dirpath exclude_dirs_list} {
    set rlist ""
    foreach fpath [glob -nocomplain -tails -types f -directory ${dirpath} *] {
            lappend rlist [file join ${dirpath} ${fpath}]
    }
    foreach dir [glob -nocomplain -tails -types d -directory ${dirpath} *] {
      if {[lsearch -exact $exclude_dirs_list $dir] == -1} {
        lappend rlist {*}[rglob [file join ${dirpath} ${dir}] $exclude_dirs_list]
      }
    }
    return ${rlist}
}

rglob /a/b/c [list dir1 dir2]

如果您只需要排除/ a / b / c / dir1,您应该更改

lappend rlist {*}[rglob [file join ${dirpath} ${dir}] $exclude_dirs_list]

lappend rlist {*}[rglob [file join ${dirpath} ${dir}] {}]

This will exclude from search resuls all directories with names in exclude_dirs_list. In fact, names are not full paths, so not only /a/b/c/dir1 will be excluded, but /a/b/c/d/e/dir1 too.

proc rglob { dirpath exclude_dirs_list} {
    set rlist ""
    foreach fpath [glob -nocomplain -tails -types f -directory ${dirpath} *] {
            lappend rlist [file join ${dirpath} ${fpath}]
    }
    foreach dir [glob -nocomplain -tails -types d -directory ${dirpath} *] {
      if {[lsearch -exact $exclude_dirs_list $dir] == -1} {
        lappend rlist {*}[rglob [file join ${dirpath} ${dir}] $exclude_dirs_list]
      }
    }
    return ${rlist}
}

rglob /a/b/c [list dir1 dir2]

If you need to exclude only /a/b/c/dir1 you should change from

lappend rlist {*}[rglob [file join ${dirpath} ${dir}] $exclude_dirs_list]

to

lappend rlist {*}[rglob [file join ${dirpath} ${dir}] {}]

相关问答

更多

相关文章

更多

最新问答

更多
  • h2元素推动其他h2和div。(h2 element pushing other h2 and div down. two divs, two headers, and they're wrapped within a parent div)
  • 创建一个功能(Create a function)
  • 我投了份简历,是电脑编程方面的学徒,面试时说要培训三个月,前面
  • PDO语句不显示获取的结果(PDOstatement not displaying fetched results)
  • Qt冻结循环的原因?(Qt freezing cause of the loop?)
  • TableView重复youtube-api结果(TableView Repeating youtube-api result)
  • 如何使用自由职业者帐户登录我的php网站?(How can I login into my php website using freelancer account? [closed])
  • SQL Server 2014版本支持的最大数据库数(Maximum number of databases supported by SQL Server 2014 editions)
  • 我如何获得DynamicJasper 3.1.2(或更高版本)的Maven仓库?(How do I get the maven repository for DynamicJasper 3.1.2 (or higher)?)
  • 以编程方式创建UITableView(Creating a UITableView Programmatically)
  • 如何打破按钮上的生命周期循环(How to break do-while loop on button)
  • C#使用EF访问MVC上的部分类的自定义属性(C# access custom attributes of a partial class on MVC with EF)
  • 如何获得facebook app的publish_stream权限?(How to get publish_stream permissions for facebook app?)
  • 如何防止调用冗余函数的postgres视图(how to prevent postgres views calling redundant functions)
  • Sql Server在欧洲获取当前日期时间(Sql Server get current date time in Europe)
  • 设置kotlin扩展名(Setting a kotlin extension)
  • 如何并排放置两个元件?(How to position two elements side by side?)
  • 如何在vim中启用python3?(How to enable python3 in vim?)
  • 在MySQL和/或多列中使用多个表用于Rails应用程序(Using multiple tables in MySQL and/or multiple columns for a Rails application)
  • 如何隐藏谷歌地图上的登录按钮?(How to hide the Sign in button from Google maps?)
  • Mysql左连接旋转90°表(Mysql Left join rotate 90° table)
  • dedecms如何安装?
  • 在哪儿学计算机最好?
  • 学php哪个的书 最好,本人菜鸟
  • 触摸时不要突出显示表格视图行(Do not highlight table view row when touched)
  • 如何覆盖错误堆栈getter(How to override Error stack getter)
  • 带有ImageMagick和许多图像的GIF动画(GIF animation with ImageMagick and many images)
  • USSD INTERFACE - > java web应用程序通信(USSD INTERFACE -> java web app communication)
  • 电脑高中毕业学习去哪里培训
  • 正则表达式验证SMTP响应(Regex to validate SMTP Responses)