Заменить флажок с изображением asp.net

Question

Это то, что я пробовал, я думаю, что вопрос является самоочевидным.

Использование CSS: (Это не работает, я сделал jsfiddle)

.star + label{ 
    background:url('image1.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

.star:checked + label{ 
    background:url('image2.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

Использование JQuery (Это работало частично)

$('.star').replaceWith("<img src='image1.png' />"); 

$('.star').click(function() { 
var $checkbox = $(this).prev(".star"); 
$checkbox.prop('checked', !$checkbox.prop('checked')); 

    if ($checkbox.prop("checked")) { 
     $image.attr("src", "image2.png"); 
    } else { 
     $image.attr("src", "image1.png"); 
    } 
}) 

JSFIDDLE: fiddle

И это мой код на странице aspx:

<span> 
     <asp:CheckBox ID="star1" CssClass="star" runat="server" /> 
     <asp:CheckBox ID="star2" CssClass="star" runat="server" /> 
     <asp:CheckBox ID="star3" CssClass="star" runat="server" /> 
     <asp:CheckBox ID="star4" CssClass="star" runat="server" /> 
     <asp:CheckBox ID="star5" CssClass="star" runat="server" /> 
    </span> 

Что я могу делать неправильно? Я искал несколько решений (здесь много вопросов), но они не обрабатывают случай, когда он является asp.NET.

Answer 1

Heres a working demo for you

для jQuery, связывающий обработчик .click событий на динамически генерируемый контент (в вашем случае, изображение) не будет работать. Вам нужно использовать следующий синтаксис:

$('.star').on('click', function() { }); 

хотя даже это не работало для меня в прошлом, и я должен был сделать:

$(document).on('click', '.star', function() { }); 

обновления

давайте посмотрим на ваш код вместе быстро:

$(document).ready(function() { 
    //write your code here 
    $('.star').replaceWith("<img src='https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav_bleu.png' class='star'/>"); 

    $('.star').click(function() { 
    var $image = ''; 
    var $checkbox = $(this).prev(".star"); 
    $checkbox.prop('checked', !$checkbox.prop('checked')); 

    if ($checkbox.prop("checked")) { 
     $image.attr("src", "https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav.png"); 
    } else { 
     $image.attr("src", "https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav_bleu.png"); 
    } 
    }) 
}); 

Первое, что вам нужно знать, это то, что вы не указали переменную $image, которую я сделал для вас. Во-вторых, переменная $image должна быть объектом jQuery, прежде чем вы сможете позвонить на нее .attr. Таким образом, вы должны объявить это $image объект что-то вроде этого:

var $image = $(this); 

Answer 2

ведущего дальше от ответа от @Abdul, и его комментарий о пропавшем $image, ваш jsfiddle имеет несколько ошибок.

Вот working version (хотя, как я уже сказал, изображения не появляются, но просмотр src через инструменты разработки показывает, что он меняется).

$(document).ready(function() { 
    //write your code here 
    $('.star').replaceWith("<img src='https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav_bleu.png' class='star'/>"); 

    $('.star').on("click", function() { 
     var $checkbox = $(this); 
     $checkbox.prop('checked', !$checkbox.prop('checked')); 

     if ($checkbox.prop("checked")) { 
      $checkbox.prop("src", "https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav.png"); 
     } else { 
      $checkbox.prop("src", "https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav_bleu.png"); 
     } 
    }) 
}); 

Первая ошибка в том, что вы принимали все элементы с class='star' и заменяя их изображением. Но изображение не имело атрибута class='star' ... поэтому, когда оно пыталось привязать к следующему утверждению, не было элементов для привязки (потому что вы только что заменили их все).

Само связывание было неправильно отформатировано (Я считаю, что это может быть старый стиль привязки) и должен был использовать стиль .on("click", function() { ... });.

Тогда вы использовали $(this).prev('.star');, когда то, что вы на самом деле хотели, было просто $(this).

Наконец, вы пытались использовать $image, которого не было, но на самом деле это был сам объект, который вы пытались изменить ... так что еще раз, что вы на самом деле хотели, было $(this) (что вы бы установили в $checkbox)

Answer 3

ответ эти рамки ASP.NET не оказывают

<asp:CheckBox ID="star1" CssClass="star" runat="server" /> 

как это.

<input type="checkbox" id="star1" class="star" value="1" /> 

Вместо этого он визуализируется как (еще один ASP.NET несовпадения)

<span class="star"> 
    <input id="star1" type="checkbox" name="star1" /> 
</span> 

Изменение функции щелчка сохраняя эту DOM структуру в виду, чтобы сделать код работы.