Как получить значение изображения Src

-3

Я хочу, чтобы получить ГКЗ образа, когда я нажмите .that изображения в столбце таблицыКак получить значение изображения Src

структуры быть как в таблице

<html> 
    <body> 
     <div> 
     <table> 
      <tr> 
       <td img src=" xxx "></td> 
      </tr> 
      <tr> 
       <td img src=" xxx "></td> 
      </tr> 
      <tr> 
       <td img src=" xxx "></td> 
      </tr> 
     </table> 
     </div> 
    </body> 
</html>

пожалуйста скажите мне способ получить СРК этого образа, когда я нажмите на изображение, а также я хочу, чтобы отправить этот SRC на другой HTML-страницы

источник

2016-12-09 kenath perera

Вы пробовали Regex в JS? – Raptor

Атрибут 'img' внутри тега' td' недопустим ... – mattias

Нет полезного вопроса. Добавьте событие click с помощью 'yourobject.addEventListener '(' click ', function (event) {})' и используйте event.target.src или добавьте предупреждение onclick = alert (this.src) "' –

Ячейка таблицы (т.е. <td>) не может содержать атрибуты IMG и ЦСИ. Вместо этого используйте тег <img> с атрибутом src.

Чтобы ответить на «вопрос»:

сказать мне способ получить СРК этого образа, когда я нажмите на изображение, а также я хочу, чтобы отправить этот SRC на другой HTML-страницы

Используйте JavaScript - и я рекомендовал метод под названием Event delegation. Привязать обработчик событий для событий кликов с помощью document.addEventListener() к событию DOMContentLoaded (знать, когда страница загружена), а затем наблюдать за кликами по документу с помощью одного обратного вызова, как в приведенном ниже примере. Таким образом, для всей страницы есть только один прослушиватель событий, а не один на изображение, что может привести к утечкам памяти и т. Д.Значение ввода может быть отправлено с формой или отправлено на другую страницу (например, с запросом AJAX).

document.addEventListener('DOMContentLoaded', function() { 
 
    document.addEventListener('click', function(event) { 
 
    if (event.target.tagName.toUpperCase() == 'IMG') { 
 
     document.getElementById('imgSrc').value = event.target.src; 
 
    } 
 
    }); 
 
});

<div>Click on an image to have its src attribute set as the value of the text input below: 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     1 <img src=" https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon&r=PG&f=1 " /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon&r=PG" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=48&d=identicon&r=PG&f=1" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    Image src: 
 
    <input type="text" id="imgSrc" size="75" /> 
 
</div>

Если вы используете библиотеку JavaScript, как jQuery, код может быть упрощен, как в приведенном ниже примере, используя .ready(), .val() и т.д. This article о делегировании события с JQuery (с использованием .on()) также может быть полезным.

$(document).ready(function() { 
 
    $(document).on('click', function(event) { 
 
    if (event.target.tagName.toUpperCase() == 'IMG') { 
 
     $('#imgSrc').val(event.target.src); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     1 <img src=" https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon&r=PG&f=1 " /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon&r=PG" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=48&d=identicon&r=PG&f=1" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <!-- removed 1 from table1 --> 
 
    Image src: 
 
    <input type="text" id="imgSrc" size="75" /> 
 
</div>

источник

2016-12-09 06:25:24

Большое спасибо Sam –

jQuery фактически поддерживает делегирование событий изначально: '$ (document) .on ('click', 'img', function (event) {...' https://learn.jquery.com/events/event-delegation/ – wxactly

Спасибо - я добавил этот ресурс в мой абзац о jQuery –

Прежде всего, ваш HTML является incorrect.Please исправить HTML, как это

<table> 
    <tr> 
     <td> <img src=" xxx " /></td> 
    </tr> 
    <tr> 
     <td> <img src=" xxx " /></td> 
    </tr> 
    <tr> 
     <td> <img src=" xxx " /></td> 
    </tr> 
</table>

И получить src из image щелкнул использовать этот

$(function() { 
    $("img").click(function() { 
    var src = $(this).attr("src"); 
    window.location = "yourpage.html?src=" + src; 
    }); 
});

Также вам нужно будет включить jquery library ссылку.

источник

2016-12-09 04:05:19 Mairaj

Попробуйте

const img = document.querySelector('img'); 

.addEventListener('click', (event) => { 
    alert(event.target.getAttribute('src')); 
});

источник

2016-12-09 04:06:48 mattias

[document.querySelector() ] (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) возвращает только первый элемент, соответствующий селекторам (или null), поэтому работает только для первого изображения ... –

Есть несколько ошибок в коде. img - отдельный тег html. Вы не можете установить его как атрибут td.

SO вы HTML будет как этот

HTML

<div> 
    <table> 
    <tr> 
     <td><img src=" xxx ">1</td> 
    </tr> 
    <tr> 
     <td><img src=" xxx2 ">2</td> 
    </tr> 
    <tr> 
     <td><img src=" xxx3 ">3</td> 
    </tr> 
    </table> 
</div>

Чтобы получить значение src, вы можете использовать getElementsByTagName, который даст вам коллекцию всех изображений.

Затем проведите через него и добавьте addEventListener внутри closure. Вы можете также использовать getAttribute получить какой-либо атрибут тега

// get all the images 
var getAllImages = document.getElementsByTagName('img'); 
// loop through it 
for (var i = 0; i < getAllImages.length; i++) { 
    (function(x) { // closure starts here 
    getAllImages[x].addEventListener('click', function() { 

     alert(this.getAttribute('src')) 
}) 
    }(i)) // pass the value of i 
}

DEMO

источник

2016-12-09 04:12:57 brk

Добавление прослушивателя событий для каждого изображения может привести к проблемам с памятью, особенно если на странице есть сотни или более изображений, что может привести к сбою браузера. Кроме того, если изображения добавляются и удаляются из DOM динамически, это может привести к утечке памяти. –

Как получить значение изображения Src

ответ

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