Изменить несколько изображений SRC с JQuery
Причина, вызываемая этим конкретным исключением, заключается в том, что содержимое элемента применяется к коллекции Items ListView. Таким образом, XAML инициализирует ListView одним локальным: ImageView в своей коллекции Items. Но при использовании ItemsControl вы должны использовать либо свойство Items, либо свойство ItemsSource, вы не можете использовать оба метода одновременно. Следовательно, когда атрибут ItemsSource обрабатывается, генерируется исключение.
Вы можете узнать, какое свойство будет обладать содержимым элемента, ища атрибут ContentPropertyAttribute в классе. В этом случае определяется выше в иерархии классов, в ItemsControl:
[ContentPropertyAttribute("Items")]
. Предполагалось, что в представлении ListView должен быть установлен локальный: ImageView, поэтому исправление должен явно указывать свойство, которое должно быть установлено.
Исправить XAML, и исключение исчезнет:
Отсутствует тег
2 ответа
Вы можете установить для каждого изображения id, требуемый для соответствующего источника и с помощью jQuery do:
$('.card img').each(function() {
var path = 'media/' + $(this).attr('id') + '.jpg'
$(this).attr('src', path);
});
Предоставляя функцию для attr(), вы создаете неявный цикл через каждый элемент img. Таким образом, вам не нужен цикл for внутри этой функции. Затем вы можете получить индекс текущего элемента в цикле, получив первый параметр функции и используя его в качестве имени файла изображения. Попробуйте это:
$("img").attr('src', function(i) {
return "media/" + i + ".jpg";
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is 1 card out of 6 -->
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator">
</div>
<div class="card-action">
<span class="link">Lorem impsum</span>
</div>
</div>
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator">
</div>
<div class="card-action">
<span class="link">Lorem impsum</span>
</div>
</div>