Question

我希望根据选定的无线电，使与该无线电相关联的javascript起作用，并且在未选择或取消选定该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

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

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

Answer 2

我用click函数包围了js条纹代码。作品。当单击单选按钮或选项卡时（取决于表单导航），js代码将“切换”。当在功能切换之间返回和第四时，它也起作用。

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

如何根据切换的选项卡有条件地加载javascript文件？

2 个答案: