Javascript onclick event firing для id, но не для класса

Question

Я довольно новичок в Javascript, и я пытаюсь получить эффект «по щелчку», когда щелчок по увеличенному изображению снова уменьшает его. Расширение происходит путем замены эскиза исходным изображением. Я также хочу получить слайд-шоу, используя изображения из моей базы данных позже.

Чтобы сделать это, я проверил, где я заменю идентификатор, который указывает, что расширение возможно для класса, и также использую глобальную переменную, чтобы я мог отслеживать URL-адрес, который я использую. Не уверен, что это лучшая практика, но я не нашел лучшего решения.

Первая часть работает нормально, мое изображение меняет ситуацию без проблем, значения также обновляются в соответствии с оператором 'alert'. Однако вторая часть, та, которая с классом никогда не запускается.

Что я делаю неправильно (кроме очень вероятных многочисленных плохих практик)?

Если вместо изменения класса я меняю идентификатор напрямую (заменяя .image_enlarged на #image_enlarged и т. Д.), Он, кажется, вызывает первую функцию, с идентификатором, но выводит обновленный идентификатор, что скорее сбивает с толку.

var old_url = ""; 

$(function(){ 

    $('#imageid').on('click', function() 
     {  
     if($(this).attr('class')!='image_enlarged'){ 
      old_url = $(this).attr('src'); 
      var new_url = removeURLPart($(this).attr('src')); 
      $(this).attr('src',new_url); //image does enlarge 
      $(this).attr('class',"image_enlarged"); 
      $(this).attr('id',""); 
      alert($(this).attr('class')); //returns updated class 
      } 
     }); 

    $('.image_enlarged').on('click', function(){ 
     alert(1); //never triggered 
     $(this).attr('src',old_url); 
     $(this).attr('class',""); 
     $(this).attr('id',"imageid"); 
    }); 
}); 

function removeURLPart(e){ 
    var tmp = e; 
     var tmp1 = tmp.replace('thumbnails/thumbnails_small/',''); 
     var tmp2 = tmp1.replace('thumbnails/thumbnails_medium/',''); 
     var tmp3 = tmp2.replace('thumbnails/thumbnails_large/',''); 

    return tmp3; 
} 

Что касается HTML, это очень просто:

<figure> 
    <img src = "http://localhost/Project/test/thumbnails/thumbnails_small/image.jpg" id="imageid" /> 
    <figcaption>Test + Price thing</figcaption> 
</figure> 

<script> 
    document.write('<script src="js/jquery-1.11.1.min.js"><\/script>'); 
</script> 
<script type="text/javascript" src="http://localhost/Project/js/onclickenlarge.js"></script> 

Answer 1

Попробуйте использовать:

addClass('image-enlarged') 

вместо:

.attr('class',"image_enlarged"); 

лучший способ сделать это будет иметь класс малых изображений и большое изображение cl который будет содержать желаемый css для обоих, а затем использовать addClass() и removeClass в зависимости от того, что вы хотели показать.

Answer 2

Из API: метод http://api.jquery.com/on/

.on() присоединяет обработчики событий к в настоящее времявыбранного установитьизэлементов в объекте JQuery.

Когда вы делаете $('.image_enlarged').on(...), нет элемента с этим классом. Следовательно, функция не регистрируется ни в одном элементе.

Если вы хотите это сделать, вам необходимо зарегистрировать событие после смены класса.

Вот пример, основанный на коде: http://jsfiddle.net/8401mLf4/

Но это регистрирует событие несколько раз (каждый раз, когда вы нажимаете), и было бы неправильно. Так что я хотел бы сделать что-то вроде:

$('#imageid').on('click', function() { 
    if (!$(this).hasClass('image_enlarged')) { 
     /* enlarge */ 
    } else { 
     /* restore */ 
    } 
} 

JSfiddle: http://jsfiddle.net/8401mLf4/2/