如何有條件地加載基於tab切換的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" %>

例如：

如果選擇了radio [data-id="onlyON"] ，則將加載<%= javascript_include_tag "stripe" %> 。 然后，當選擇[data-id="onlyON-1"] ， <%= javascript_include_tag "stripe" %>將卸載，而<%= javascript_include_tag "stripe-a" %>將加載等等

Answer 1

一旦將腳本標記添加到文檔中，就沒有簡單的方法來卸載/禁用腳本標記 ; 特別是當它是像Stripe這樣的第三方腳本時，而不是腳本，你可以輕松編輯自己。

相反，我將問題分解為多個文檔。 如果每個選項卡的主體包含一個iframe，並且每個iframe包含一個Stripe JS文件和它關心的表單組件，那么您將把每個Stripe腳本隔離到它自己的文檔中，並且它們不應相互干擾。

Answer 2

我用點擊功能包圍了js條帶代碼。 作品。 當單擊一個收音機或標簽時（取決於表單導航），js代碼將“切換”。 它在返回時起作用，在函數切換之間也是第四個。

現在全部解決了，我的測試沒有問題