Сделать javascripts универсальным, чтобы его можно было применять ко всем изображениям

Question

Я написал функции javascript для увеличения и уменьшения изображения с помощью сжатия. Теперь я хочу обобщить приведенный ниже код, чтобы я мог добавить JavaScript в файл commonjavascript.

    var scale = 1;
    var newScale;


    function saveChanges() {
           scale = newScale;
    }
    function getAngleAndScale(e) {
        e.preventDefault();
        newScale = scale * e.scale;
        var tString = "scale(" + newScale + ")";
        document.getElementById("DocumentViewerImage").style.webkitTransform = tString;
    }
    function init(element) {

alert (элемент);document.getElementById ("DocumentViewerImage"). addEventListener ("жест обмена", getAngleAndScale, false);document.getElementById ("DocumentViewerImage"). addEventListener ("gestend", saveChanges, false);}

В вышеприведенном коде я жестко закодировал идентификатор изображения. Я хочу получить идентификатор клиента изображений и затем передать его в javascript, чтобы сделать вызов. Как я могу сделать его универсальным? Как мне сделать это?получить идентификатор клиента и в каком случае я должен сделать звонок?

Я сейчас использую этот код: в теге изображения: id = "DocumentViewerImage" style = "vertical-align: middle; margin-top: 2%;»OnLoad = "INIT (это);"но в javascript, если я говорю alert (element), я получаю как [objectHTMLImageElement]. Как я могу получить идентификатор тега изображения?Спасибо

Answer 1

Присоедините события ко всем изображениям, которые вы хотите увеличить и уменьшить, например: $ ('img # DocumentViewerImage'). Live ("жест обмена", function () {

        getAngleAndScale(event);
});
$('img#DocumentViewerImage').live("gestureend", function() {

      saveChanges();
});
</script>

Javascripts:функция saveChanges () {

scale = newScale;

}
function getAngleAndScale(e) {
var scale = 1;
var newScale;
var imgId = e.target.id;
// Don't zoom or rotate the whole screen
e.preventDefault();
// scale is an event property
newScale = scale * e.scale;
var tString = "scale(" + newScale + ")";
e.target.style.webkitTransform = tString;
} 

Answer 2

возможно, вы также хотите установить начало преобразования в центральную точку пинча: Javascript, css: изменить источник преобразования на центральную точку обмена жестами

Hans

Answer 3

Вы можете передать идентификаторы с помощью функций:

function getAngleAndScale(e, id) {
    e.preventDefault();
    newScale = scale * e.scale;
    var tString = "scale(" + newScale + ")";
    document.getElementById(id).style.webkitTransform = tString;
}
function init(id) {
    document.getElementById(id).addEventListener("gesturechange", getAngleAndScale, false);
    document.getElementById(id).addEventListener("gestureend", saveChanges, false);
}