如何在使用JavaScript的asp列表視圖控件中隱藏linkbutton點擊列表元素

我有一個asp:listview控件，它在後面的代碼中填充來自數據綁定數據表的數據以創建動態列表。使用該列表，我有一個鏈接按鈕，我希望綁定到JavaScript函數以隱藏相應的li元素（如果點擊）。這是我的HTML：如何在使用JavaScript的asp列表視圖控件中隱藏linkbutton點擊列表元素

<asp:ListView ID="lstAIInsureds" runat="server"> 
    <LayoutTemplate> 
     <ul class="collection"> 
      <asp:PlaceHolder ID="itemPlaceholder" runat="server" />  
     </ul>     
    </LayoutTemplate> 
    <ItemTemplate> 
     <li class="collection-item" id="liRemoveAI"> 
      <div> 
       <%#Eval("Response").ToString().Replace("|",", ")%> 
        <asp:LinkButton ID="lbRemoveAI" class="material-icons" ClientIDMode="Static" OnClientClick="return RemoveAI();" runat="server">remove_circle</asp:LinkButton> 
      </div> 
     </li> 
    </ItemTemplate> 
    <EmptyDataTemplate> 
     <p>Nothing here.</p> 
    </EmptyDataTemplate> 
</asp:ListView>

和我後面的代碼被綁定像這樣：

this.lstAIInsureds.DataSource = dt; 
this.lstAIInsureds.DataBind();

這是我目前的JS，但當然在縫隙for循環而這正是我需要完成：

function RemoveAI() { 
     var olsRemoveAI = document.getElementById("liRemoveAI"); //this is the ls that is to be hidden 
     var obtRemoveAI = document.getElementById("lbRemoveAI"); //this is the linkbutton that is clicked to hide the parent ls element 

     for (i = 0; i < olsRemoveAI.???.length; i++) { 
      //if this button is contained in the parent li, mark the li as hidden: 
      olsRemoveAI.style.visibility = "hidden"; 
      olsRemoveAI.style.display = "none"; 

      //else: 
      olsRemoveAI.style.visibility = "visible"; 
      olsRemoveAI.style.display = "block"; 
     } 

     return false; 
}

這是可行的嗎？非常感謝援助！

來源

2017-07-28 Kevin Henzel

由於元素lbRemoveAI正在「服務器」上運行，因此您需要查看頁面的HTML輸出並獲取最終的客戶端ID，然後使用該元素ID更新您的JavaScript。

來源

2017-07-28 22:18:08

但我需要一個解決方案，在沒有頁面加載的情況下處理JS。如果需要移除runat服務器標籤來解決此問題，那很好。我的目標是通過單擊刪除按鈕而不回發來摺疊此控件。 –

正如此處按鈕文檔中所述（https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button(v=vs.110).aspx），您可以使用屬性OnClientClick =「string」其中string是JS中函數的名稱。 –

獲取父元素：

var buttonParent = document.getElementById("lbRemoveAI").parentElement;

當然，這將返回股利，而不是李。它看起來像你可以簡單地刪除div並更改一些你的CSS，或者你可以使用兩次.parentElement。

Read this，它是關於.parentElement。

然後，您可以使用：

buttonParent.style.display = 'none';

或者，使用jQuery：

$(buttonParent).hide();

UPDATE：

這裏的jQuery的，將工作。你應該真的在使用一個類，而不是按鈕的ID。使用（this）將引用被點擊的確切按鈕。你可能不想要jQuery，但我不知道如何用純粹的JS來做到這一點。如果你不能使用jQuery，應該很容易找出如何改變它。

var obtRemoveAI = document.getElementById("lbRemoveAI"); 
$(obtRemoveAI).click(function() { 
    $(this).parentElement.hide() 
});

來源

2017-07-28 22:25:55 Jacobjanak

感謝您的回覆！我在代碼中嘗試了這一點，但實際上這對我不起作用，因爲我有一個共享靜態ID「lbRemoveAI」的元素列表。當JS執行時，它會正確隱藏lbRemoveAI的父項，但在後續執行時，它會嘗試將相同的li項目標記爲隱藏，因爲它只是將第一項定位到列表中。我需要做的是能夠遍歷並確定我按下的相應listbutton，以便相關的li元素被隱藏。這可能嗎？ –

我更新了我的代碼以使用（this）變量來引用被單擊的實際按鈕。 – Jacobjanak

如何在使用JavaScript的asp列表視圖控件中隱藏linkbutton點擊列表元素

回答

相關問題