Изящная модернизация анкерного элемента

Question

Я хочу добавить функциональность JavaScript в массив миниатюр, чтобы изображение открывалось при нажатии вместо открытия в текущем окне.Я думаю о наличии функции в атрибуте onclick, но я не думаю, что эта работа:

<script type='text/javascript'>
 function expand(){
  this.height = 200;
  this.width = 200;
 }
</script>

<a href='/image_1.jpg' onclick='expand()'>
 <img src='/image_1.jpg'>
</a>

Если JavaScript не включен, я бы хотел, чтобы ссылка работала.Есть идеи, как это сделать?Спасибо за ваше время:)

Answer 1

Вы должны указать this в качестве переменной в функции, например ths

<script type='text/javascript'>
 function expand(ths){
    $(ths).find('img').height('200');
    $(ths).find('img').width('200');
  return false;
 }
</script>

<a href='/image_1.jpg' onclick='expand(this)'>
 <img src='/image_1.jpg'>
</a>

И return false говорит Пруссе.

** ОБНОВЛЕНО ** Если вы хотите изменить размер изображения, вы должны назвать изображение без ссылки.

Answer 2

Не используйте обработчик onclick:

Вместо того, чтобы:

var elem = document.getElementById("the-id-of-a");
elem.addEventListener('click', function(e) { /* handle event */ e.preventDefault(); return false; });

См .: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Answer 3

Просто заставьте обработчик onclick вернуть false.Использование встроенных обработчиков, как в вашем примере:

<a href='/image_1.jpg' onclick='expand(); return false;'>