通過Javascript在復選框更改時隱藏或顯示轉發器內的跨度

Question

我有一個 asp 中繼器，它是從包含學校課程名稱（鍵）和這些課程的描述（值）的哈希表填充的。 我想根據是否選中復選框輸入來顯示/隱藏封裝在跨度中的描述。

我已經設法通過將 Container.ItemIndex 作為參數傳遞給我的 JS 方法來傳遞當前的中繼器迭代編號，希望我可以獲得中繼器集合並只引用該索引處的跨度 ID。

我還嘗試將跨度的 ID 命名為“字符串”+ Container.ItemIndex，希望我能以這種方式獲得跨度，但也沒有運氣。

下面是我的 aspx 代碼，請幫助我隱藏/顯示用戶在 JavaScript 中選中或取消選中復選框的轉發器迭代的 spnMoreInfo 跨度。

```
    <asp:Repeater runat="server" id="rptClassList" >
    <ItemTemplate>

        <span class="text-center;" style="font-size: 24px; font-weight: 200"><%#((DictionaryEntry)Container.DataItem).Key%></span>

        <label class="switch">
            <input type="checkbox" runat="server" CssClass="rpContacts" onchange='<%# "return HideShow(" + Container.ItemIndex + ")" %>'>
            <span class="slider round"></span>
        </label><br/>

        <span runat="server" id="spnMoreInfo" class="text-center;" style="display: none"><%#((DictionaryEntry)Container.DataItem).Value%> </span>

    </ItemTemplate>
</asp:Repeater>
```

Answer 1

最后，我能夠將控件的 ID 動態命名為字符串 + 當前轉發器迭代編號。 我以前使用 runat=server 的事實阻礙了我。 然后，我根據 JavaScript 方法中的選中狀態更改了 display 屬性。 這是代碼和屏幕視圖。

<asp:Repeater runat="server" id="rptClassList" >
    <ItemTemplate>

        <br/><span class="text-center;" style="font-size: 24px; font-weight: 200"><%#((DictionaryEntry)Container.DataItem).Key%></span>

        <label class="switch">
            <%--Make the ID of the checkbox = a string plus the current iteration number of the repeater and pass that iteration number in the client side method--%>
            <input type="checkbox" id="chkHideShow<%# (Container).ItemIndex%>" onchange='<%# "return HideShow(" + Container.ItemIndex + ")" %>'>
            <span class="slider round"></span>
        </label><br/>

        <span id="spnMoreInfo<%# (Container).ItemIndex%>" class="text-center" style="display: none"><%#((DictionaryEntry)Container.DataItem).Value%> <br/></span> 

    </ItemTemplate>
</asp:Repeater>

<script type="text/javascript">
    function HideShow(selectedIteration) {

        var checkbox = document.getElementById("chkHideShow" + selectedIteration).checked;
        var span = document.getElementById("spnMoreInfo" + selectedIteration);

        if (checkbox == false) {
            span.style.display = "none";
        } else {
            span.style.display = "inline";
        }

    }
</script>

未選中：

檢查：

Answer 2

您可以在轉發器項目中找到感興趣的span ，然后使用 javascript 隱藏/顯示它。 像這樣的東西。

    <asp:Repeater runat="server" id="rptClassList" >
    <ItemTemplate>
       <div><%--wrap repeater item --%>
        <span class="text-center;" style="font-size: 24px; font-weight: 200"><%#((DictionaryEntry)Container.DataItem).Key%></span>

        <label class="switch">
            <input type="checkbox" runat="server" CssClass="rpContacts" onchange='<%# "return HideShow(" + Container.ItemIndex + ")" %>'>
            <span class="slider round"></span>
        </label><br/>

        <span runat="server" id="spnMoreInfo" class="text-center descr"><%#((DictionaryEntry)Container.DataItem).Value%> </span>
      </div>
    </ItemTemplate>
</asp:Repeater>
<script>
   function toggleShow(el){
     var item = el.parentNode.parentNode;//you know where is the item
     if(!el.checked)
        item.querySelector('.descr').style.display = 'none';
     else
        item.querySelector('.descr').style.display = 'inline';//default for span
   }
   window.onload = function(){
     var repeater = document.getElementById('<%#rptClassList.ClientID%>');//or hardcode it
     var chks = repeater.querySelectorAll('[type=checkbox]');
     for(var i = 0, chk; chk = chks[i]; ++i){
       toggleShow(chk);
       chk.addEventListener('click', function(){
           toggleShow(this);
       });
     }//for
   };//window.onload