Question

这个jquery（正好在下面），根据下拉选择隐藏表中的列，有效。（向Oka成员致敬，他对此代码的帮助非常受欢迎。）但是，它仅在独立文档中完全有效。

browser.driver.getCapabilities().then(function(caps) {
    var browserName = caps.caps_.browserName;

    if (browserName === "internet explorer") {
        // ...
    }
});

但是当我将表放在另一个（启用了javascript的）文档中时，它只能部分工作。

即，您在浏览器中加载该文档，并且表格按原样显示 - 隐藏了多个列。但是，每个表中的下拉选择（应该显示一列=＆＃39;选择x＆＃39;同时隐藏其他表）不会触发隐藏/显示。您可以从下拉列表中进行选择，但表格只是显示/隐藏与加载页面时相同的列。

我用Google搜索并发现了stackoverflow中的相似内容，我从中收集了它的一些时间问题，和/或我的＆＃34;事件处理程序＆＃34;设置不正确。

但除此之外我还是难过。关于如何解开的任何建议？

（因为这些表加载的＆＃34;外部＆＃34; js文档似乎不是问题 - 它允许上面的jquery只运行一次 - 我想我＆＃39 ; d留下那段代码。）

好吧，根据大众的要求，我会发布（uuuuugly）外部文件。请记住，它适用于单独的js文件，我也会发布。

上面的jquery位于文件＆＃39; dropdown.js＆＃39;。

外部文件：

$(document).ready(function() {
    $('#sel').on('change', function () {
        var val = $(this).val(),
        target = '.' + val;
        $('.choice').hide();
        $(target).show();
    }).change();
});

以下是外部文档引用的javascript文件（＆＃39; tabview.js＆＃39;）：

<?php
include ("file1.php");
include ("file2.php");
$tt = "<HTML>
<HEAD>
<TITLE>Outer table</TITLE>
<STYLE>
.conts  {visibility:hidden}
.tab    {   border-top:solid thin #E0E0E0;
            border-right:solid thin gray;
            border-left:solid thin #E0E0E0;
            background: #C0C0C0;
            font-family:Verdana;
            font-size:10pt;
            text-align:center;
            font-weight:normal
            display: inline-block;
            background:      -o-linear-gradient(top, #CCFF66 50%, #CCFF99 100%);
    background:     -ms-linear-gradient(top, #CCFF66 50%, #CCFF99 100%);
    background:    -moz-linear-gradient(top, #CCFF66 50%, #CCFF99 100%);
    background: -webkit-linear-gradient(top, #CCFF66 50%, #CCFF99 100%);
    background: linear-gradient(top, #CCFF66 50%, #CCFF99 100%);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
    text-shadow: 0 1px #FFF;
    margin: 0 -5px;
    padding: 0 20px;}

.selTab {   border-left:solid thin white;
            border-top:solid thin white;
            border-right:solid thin black;
            font-family:Verdana;
            font-size:10pt;
            width: 10;
            font-weight:bold;
            text-align:center}

</STYLE>
<SCRIPT src = 'tabview.js'></SCRIPT>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<SCRIPT src = 'dropdown.js'></SCRIPT>

</HEAD>
<BODY BGCOLOR=white onclick='changeTabs()' onload='init()'>


<DIV STYLE='position:absolute; top:10; height:350; width:300; left:25; border:none thin gray'>


<TABLE STYLE='width:108%; height:250' CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD ID=t1 CLASS=selTab HEIGHT=25>Point</TD>
        <TD ID=t2 CLASS=tab  >Lifecycle</TD>
    </TR>
    <TR>
        <TD ID=t1base STYLE='height:2; border-left:solid thin white'></TD>
        <TD ID=t2base STYLE='height:2; background-color:white'></TD>
        <TD ID=t3base STYLE='height:2; background-color:white'></TD>
        <TD ID=t4base STYLE='height:2; background-color:white'></TD>
        <TD ID=t5base STYLE='height:2; background-color:white'></TD>
        <TD ID=t6base STYLE='height:2; background-color:white'></TD>
        <TD ID=t7base STYLE='height:2; background-color:white; border-right:solid thin white'></TD> 
    </TR>


    <TR>
        <TD ID=tabContents>sample contents</TD>

    </TR>
</TABLE>
</DIV>


<DIV CLASS=conts ID=t1Contents>$t_file1</DIV>
<DIV CLASS=conts ID=t2Contents>$t_file2</DIV>";
?>
</BODY>
<?php   $tt.="</HTML>";
echo $tt;
?>

Answer 1

您将.on事件绑定到（“#sel”），这在您的第二个文档中尚不存在。更改.on以收听根，并将#sel作为选择器传递。

$(document).ready(function() {
    $(document).on('change', '#sel', function () {
        var val = $(this).val(),
        target = '.' + val;
        $('.choice').hide();
        $(target).show();
    }).change();
});

jquery自己工作，但在js内只发射一次

1 个答案: