如何有条件地加载基于选项卡的javascript文件？

Question

我希望，根据所选的收音机，与收音机相关联的javascript能够正常工作，当它没有被选中或取消选择时，它将不能正常工作。

标签和收音机的HTML：

<nav>
    <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active no-decoration" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Video</a>
        <a class="nav-item nav-link no-decoration" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Tweet</a>
    </div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

        <div class="card-body">
            CHOOSE RADIO

            <form id="selectForm">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <label class="custom-control custom-radio in active">
                            <input type="radio" name="distTravel" value="Ontario" class=" no-decoration" data-id="onlyON" />
                            <span class="custom-control-indicatore"></span>
                            <span class="custom-control-description">You</span>
                        </label>
                    </li>
                    <li class="nav-item">
                        <label class="custom-control custom-radio">
                            <input type="radio" name="distTravel" value="NA" class=" no-decoration" data-id="onlyNA" />
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description">Someone else</span>
                        </label>
                    </li>
                </ul>
            </form>

            <div class="tab-content in active">
                <div class="card-block tab-pane active" id="onlyON">
                    TEXT
                </div>

                <span class="token"></span>
                <% end %>
                    <% end %>
            </div>
            <div class="card-block tab-pane" id="onlyNA">

            </div>

        </div>
    </div>

</div>
</div>
<div class="tab-pane-1 fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    <div class="card-body">

        CHOOSE RADIO
        <form id="selectForm">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <label class="custom-control custom-radio">
                        <input type="radio" name="distTravel-2" value="Ontario-2" class="no-decoration" data-id="onlyON-1" />
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">You</span>
                    </label>
                </li>
                <li class="nav-item">
                    <label class="custom-control custom-radio">
                        <input type="radio" name="distTravel-2" value="NA-2" class="no-decoration" data-id="onlyNA-1" />
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Someone else</span>
                    </label>
                </li>
            </ul>
        </form>

        <div class="tab-content-2 in active">
            <div class="card-block tab-pane-1 active" id="onlyON-1">

                TEXT
            </div>

            <span class="token"></span>

            <div class="card-block tab-pane-1" id="onlyNA-1">
            </div>
            <% end %>
                <% end %>
        </div>
    </div>
</div>

Javascript标记：

<%= javascript_include_tag "stripe" %>
<%= javascript_include_tag "stripe-a" %>
<%= javascript_include_tag "stripe-2" %>
<%= javascript_include_tag "stripe-2-a" %>

例如，：

如果选择了无线电[data-id="onlyON"]，则将加载<%= javascript_include_tag "stripe" %>。然后，当选择[data-id="onlyON-1"]时，<%= javascript_include_tag "stripe" %>将卸载，<%= javascript_include_tag "stripe-a" %>将加载如此等等。

Answer 1

我用单击函数包围了js条带代码。很管用。当单击收音机或选项卡(取决于表单导航)时，js代码将“切换”。它工作时，返回和第四次之间的功能切换，以及。

现在都解决了，我的测试都没有问题

Answer 2

一旦将no easy way to unload/disable a script tag添加到文档中，就会有它；特别是当它是像Stripe这样的第三方脚本，而不是一个脚本时，您可以轻松地编辑自己。

相反，我会将问题分解成多个文档。如果每个选项卡的主体包含一个iframe，而每个iframe包含一个Stripe JS文件和它关心的表单组件，那么您将把每个Stripe脚本隔离到自己的文档中，它们不应该相互干扰。