Ошибка в моём коде jquery

216

30 января 2019, 00:20

<style>
.hidden {
    display: none;
}

<script>
$(document).ready(function(){
    function toggledescription(el) {
    var selector = el.getAttribute('descSelector');
    $(selector).toggleClass('hidden');
}   
    $('.img-2').css('position','absolute').css('bottom','20px').css('left','10px')

});

</script>
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/2.png" descSelector="#somedesc" onclick="toggledescription(this)" />
<div id="somedesc" class="hidden">Image description</div>

Не могу понять,в чём ошибка, в браузере выделяет welcome.html:57 Uncaught ReferenceError: toggledescription is not defined at HTMLImageElement.onclick (welcome.html:57) Как это исправить? Хочу сделать так,чтобы при нажатии на картинку высвечивался блок с информацией

Answer 1

Функция toggledescription не видна снаружи обработчика $(document).ready(function(){, в котором она объявлена.

$(document).ready(function() { 
 
  function toggledescription(el) { 
    var selector = el.getAttribute('descSelector'); 
    $(selector).toggleClass('hidden'); 
  } 
   
  $("img[descSelector]").click(function(e) { 
    toggledescription(this); 
  }); 
});

.hidden { 
  display: none; 
} 
#somedesc { 
  font-size:x-large; 
  text-align:center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/2.png" descSelector="#somedesc" /> 
<div id="somedesc" class="hidden">Image description</div>