如何使用JavaScript在MVC ASP.NET中顯示或隱藏圖像？

我目前正在研究一個有對象列表的視圖。這些對象包含圖像作爲其屬性之一。我想列出這些對象，但不會顯示圖像，直到用戶需要。要做到這一點，我想在每個模型的描述旁邊有一個按鈕。當用戶點擊按鈕時，圖像將出現。如何使用JavaScript在MVC ASP.NET中顯示或隱藏圖像？

我的視圖代碼：

@{int i = 1;} 
    @foreach (var r in Model.TestInputs) 
    { 
     <dd> 
      @i) @r.InputValue 
      @if (r.Image != null) 
      { 
       <input type="button" class="btn btn-default; showButton" value="Show Image" /> 
       <input type="button" class="btn btn-default; hideButton" value="Hide Image" style="display:none;" /> 
       <div class="image" style="display:none;"> 
        <img src="@Model.InputImageStrings[i-1]" height="400" /> 
       </div> 
       <script type="text/javascript"> 
        $('.showButton').eq(@i-1).on("click", function() { 
         $(this).eq(@i-1).hide(); 
         $('.image').eq(@i-1).show(); 
         $('.hideButton').eq(@i-1).show(); 
        }) 
        $('.hideButton').eq(@i-1).on("click", function() { 
         $(this).eq(@i-1).hide(); 
         $('.image').eq(@i-1).hide(); 
         $('.showButton').eq(@i-1).show(); 
        }) 
       </script> 
       <br /> 
       <br /> 
      } 
     </dd> 
      i++; 
    }

這工作完全在列表中的第一個元素。列表中的第一個按鈕將顯示列表中第一個對象的圖像，但其他任何按鈕都不會執行任何操作。

在確保圖像在那裏的測試中，我從$（'。image'）中刪除了.eq（@ i-1），並且當我單擊列表中的第一個按鈕時，顯示了所有圖像。因此，我的結論是，由於某種原因，除了第一個按鈕之外的所有按鈕都不會觸發JavaScript。

如果有人有任何建議或瞭解我在做什麼錯我會很感激一些幫助。

來源

2015-10-03 Jon

你的代碼添加JavaScript事件有關循環的每個迭代每個按鈕。你不想要這個。相反，在視圖底部添加一個腳本標記，並將兩個單擊事件處理程序包裝在文檔就緒函數中 – JB06

您可以使用JQuery Index

$('.showButton').on("click", function() { 
    var i = $('.showButton').index(this); 
});

來源

2015-10-03 16:15:44

謝謝。我是相當新的JQuery，但爲什麼這種索引方法工作，而另一個沒有？ – Jon

可能是，與文件準備包裝這個代碼將工作。但不好的做法，我認爲寫js圈子。 –

如何使用JavaScript在MVC ASP.NET中顯示或隱藏圖像？

回答

相關問題