Dynamic Variable Содержание JavaScript

<script> \t \t \t 
 
function zeigeBildGross1(Bild1){ 
 
    document.getElementById("Bild1").width = 500; 
 
    document.getElementById("Bild1").height = 300; 
 
} 
 
\t \t \t 
 
function zeigeBildGross2(Bild2){ 
 
\t document.getElementById("Bild1").width = 500; 
 
\t document.getElementById("Bild1").height = 300; 
 
} 
 
\t \t \t 
 
function zeigeBildGross3(Bild3){ 
 
\t document.getElementById("Bild1").width = 500; 
 
\t document.getElementById("Bild1").height = 300; 
 
} 
 
\t \t \t 
 
function zeigeBildGross4(Bild4){ 
 
\t document.getElementById("Bild1").width = 500; 
 
\t document.getElementById("Bild1").height = 300; 
 
} 
 
</script> 
 
<noscript> 
 
Bitte JavaScript in Ihrem Browser aktivieren! 
 
</noscript> 
 
</head> 
 
<body> 
 
\t <img id="Bild1" width=300 height=200 onclick=zeigeBildGross(Bild1) src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" > 
 
\t <img id="Bild2" width=300 height=200 onclick=zeigeBildGross(Bild2) src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br> 
 
\t <img id="Bild3" width=300 height=200 onclick=zeigeBildGross(Bild3) src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png"> 
 
\t <img id="Bild4" width=300 height=200 onclick=zeigeBildGross(Bild4) src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br> 
 
</body>

Здравствуйте, Я хочу, чтобы закодировать сайт с помощью HTML и JS, где показаны 4 фотографии. Если я нажимаю на одно изображение, оно должно быть изменено.

Возможно ли получить «динамическую» переменную?

Моя идея состояла в том, чтобы получить новую переменную, которая может иметь содержимое Bild1, Bild2, Bild3 или Bild4, в зависимости от того, какое изображение было нажато раньше, чтобы не было той же функции для каждого случая просто с другим словом.

Например:

function zeigeBildGross(){ 
    var x = <!-- depending on which pic was pressed either: Bild1, Bild2, Bild3 or Bild4 !--> 
    document.getElementById(x).width = 500; 
    document.getElementById(x).height = 300; 
}

Возможно ли это?

Спасибо за чтение, Stöger

источник

2015-06-09 Stöger

Просто доставить идентификатор вашего образа функции:

HTML: <img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this.id)">

Javascript:

function zeigeBildGross(id){ 
    document.getElementById(id).width = 500; 
    document.getElementById(id).height = 300; 
}

уборщик версия:

<img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this)">

Javascript:

function zeigeBildGross(bild){ 
    bild.width = 500; 
    bild.height = 300; 
}

источник

2015-06-09 17:17:49 Tyr

Спасибо за ваш ответ, все это работает. Но я не смог поставить только _this_ в скобки, он работает только с ** this.id **! –

Вам не нужно, чтобы создать переменную, которая содержит изображение будучи щелкнул, она уже существует в контексте в обработчике onclick событий.

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

function zeigeBildGross(bild){ 
 
    bild.width = 500; 
 
    bild.height = 300; 
 
}

<img id="Bild1" width=300 height=200 onclick="zeigeBildGross(this)" src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" > 
 
<img id="Bild2" width=300 height=200 onclick="zeigeBildGross(this)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br> 
 
<img id="Bild3" width=300 height=200 onclick="zeigeBildGross(this)" src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png"> 
 
<img id="Bild4" width=300 height=200 onclick="zeigeBildGross(this)" src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>

источник

2015-06-09 18:04:49 Guffa

Как я уже упоминал в своем комментарии к ответу @ Tyr, он не работает с этим (в моем случае). Я должен поставить _this.id_ –

@ Stöger: Если вы передадите 'this.id' функции, то вы получите идентификатор элемента, и вы должны использовать' getElementById', чтобы получить ссылку на элемент, который у вас уже был ссылка на. Если вы передадите 'this' в функцию, у вас есть ссылка на элемент, и вам не нужно снова искать элемент, просто используйте этот параметр для доступа к элементу. См. Код в моем примере. Кроме того, если вы передаете ссылку на элемент вместо id, для элемента не нужен идентификатор, чтобы он работал. – Guffa

Спасибо за ваш комментарий! Теперь я понимаю, почему я не смог использовать _this_, спасибо! –

Dynamic Variable Содержание JavaScript

ответ

Смежные вопросы