Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Вставить атрибуты title и alt для картинки (https://javascript.ru/forum/css-html/75199-vstavit-atributy-title-i-alt-dlya-kartinki.html)

Bort575 12.09.2018 07:58

Вставить атрибуты title и alt для картинки
 
День добрый коллеги!

Имею такую функцию:
if(item.type === 'image') {
				item.img = $('<img class="mfp-img" />').on('load.mfploader', function() {
					item.hasSize = true;
				}).on('error.mfploader', function() {
					item.hasSize = true;
					item.loadError = true;
					_mfpTrigger('LazyLoadError', item);
				}).attr('src', item.src);


Нужно вставить тайтл и альт для изображения. В php это сделано так: class="h1_product">{{ heading_title }} {{ model }}


Вот эти два поля {{ heading_title }} {{ model }} мне и нужно вставить в качестве тайтла и альта. Как это сделать....туплю. Спасибо!

Bort575 12.09.2018 08:32

Наведите на мысль, как {{ heading_title }} {{ model }} вогнать и в тайтл и в альт. Понятно, что через .attr('alt',... как передать эти значения не врублюсь никак...

Nexus 12.09.2018 09:05

Bort575, Можно так:
<script>
const product={
    title:'{{ heading_title }}',
    model:'{{ model }}'
};
</script>

<script>
    $('.some-elem img').attr(product);
</script>

Bort575 12.09.2018 09:20

Так, уже чувствую понятнее становится...
 
А как это вставить в js - файл. Там немного другая структура, оттого и весь сыр-бор.

_preloadItem: function(index) {
			index = _getLoopedId(index);

			if(mfp.items[index].preloaded) {
				return;
			}

			var item = mfp.items[index];
			if(!item.parsed) {
				item = mfp.parseEl( index );
			}

			_mfpTrigger('LazyLoad', item);

			if(item.type === 'image') {
				item.img = $('<img class="mfp-img" />').on('load.mfploader', function() {
					item.hasSize = true;
				}).on('error.mfploader', function() {
					item.hasSize = true;
					item.loadError = true;
					_mfpTrigger('LazyLoadError', item);
				}).attr('src', item.src);
			}


			item.preloaded = true;
		}

Nexus 12.09.2018 09:30

Bort575, можно объявление "константы" можно оставить в шаблоне, а в скрипте уже работать с константой.
Однако лучше элементу с классом "h1_product" добавить необходимые данные в data-атрибут, а из скрипта просто прочитать их.

Bort575 12.09.2018 09:43

Да уж....но мой опыт пока на уровне "моя твоя не понимает"...
 
Профессор, я как та собака....понимать понимаю, как сделать не пойму....уже способов 15 опробовал ...мозг дымит. Всё сделал, весь код ...а тут затык и писец прям! :-?

Nexus 12.09.2018 09:48

Bort575, данные в data-атрибутах нужно экранировать.
<h1 class="h1_product" data-title="{{ heading_title }}" data-model="{{ model }}">{{ heading_title }} {{ model }}</h1>
<script>
//Это в вашем скрипте
const $header=$('h1.h1_product');
$('.some-elem img').attr({
    title:$header.data('title'),
    alt:$header.data('model')
});
</script>



--------------
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Bort575 12.09.2018 10:11

Так, кажись дошло)))))
 
Спасибо огромное, сейчас буду лабать код))))) Хорошего дня!


Часовой пояс GMT +3, время: 16:21.