Расширение освежающего изображения в JS

Question

Quick background: У меня есть приложение, которое вытаскивает JPG с IP-камеры и обновляет изображение каждые полсекунды для создания видеопотока.

Цель: Я пытаюсь сделать изображение таким образом, что при нажатии, она будет всплывать больше - в конечном счете, с другим индексом г, но это прийти позже.

Проблема: Когда я добавляю следующий JS к своему ImageID, это абсолютно не влияет на мое изображение при нажатии.

$(function() 
{ 
    $('Image1').on('click', function() 
    { 
     $(this).width(1000); 
    }); 
}); 

Отдых:

---

Вот мой HTML:

<div class="col-md-4"> 
     <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" /> 
</div> 

Вот мой JS Refresh:

setInterval(function() { 

    //Source for Warehouse 1 
    var image1 = document.getElementById('Image1'); 
    image1.src = 'http://CAMERAIP/snap.jpg?rand=' + Math.random(); 

}, 500); 

Answer 1

Вы используете синтаксис JQuery, поэтому убедитесь, у вас есть библиотека jQuery, размещенная где-то на вашей странице (см. here).

Кроме того, вы должны изменить от

[...] 
$('Image1').on('click', function() 
[...] 

в

[...] 
$('#Image1').on('click', function() 
[...] 

Вы выбираете элемент, через его ID, так что вы должны использовать селектор ID, который # [элемент Я БЫ]. Вы можете узнать больше о селекторах jQuery here.

Edit:

Я просто заметил, что вы пытаетесь выбрать жерех изображение, а не <img> тег. Поскольку ваше asp-изображение создается на стороне сервера, идентификатор не будет одинаковым для сгенерированного HTML, и мой предложенный селектор не будет работать.

Вместо этого используйте $("#<%=Image1.ClientID%>"), как описано в this answer