Динамическое изменение изображения с помощью JavaScript

Question

Динамическое изменение изображения с помощью JavaScript

1

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

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
<body>
  <div class="link">
    <a onclick="showImg()" class="link__color">All</a><!--category: 0-->
    <a onclick="showImg()" class="link__color">category-1</a>
    <a onclick="showImg()" class="link__color">category-2</a>
    <a onclick="showImg()" class="link__color">category-3</a>
  </div>

  <div class="container">
    <!-- <div class="container__img"><img class="img" src=""></div> -->
  </div>

</body>
</html>

JS:

    const partners = [
  {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP267XEMpkNGK6SFQ97S0H417cdi3wwu6PtweMTOGSPreaJqFJWQ'', category: [0,1,3]},
  {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8YvxkmxhzlS3EQ9nmwODbfDvxzdYZZCbBl_Q3mkw53qH8QIv0hQ'', category: [0,2]},
  {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGV9LR9tr0hSWJdUcD15OSk7p3X47sy4QFBB6SLOQXQYt7G8AnfA'', category: [0,1,2]},
  {img: 'src='https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg'', category: [0,1,2]},
  {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27'', category: [0,2,3]},
  {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27'', category: [0,2]},
  {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUgwZXDhsiXxNBQ8KAxFvVcOGU0mMd8gohhRf5OP4z0NOjeO6N'', category: [0,3]},
];


function showImg(category) {
  const createDiv = document.createElement('div').setAttribute('class', 'container__img');
  /* creatDiv = is the div that will surround every img */
  partners.forEach(function() {
    if() {

    }
  });
}

Это то, где я пытаюсь много чего. Поэтому я хотел бы, чтобы каждое изображение помещало его в мой класс: container__img. И я не уверен, что forEach() - правильная идея. (Plunker: https://plnkr.co/edit/OqCFuDExAbae8KDkfAhI?p=preview)

думаю, что это не очень сложно, но на данный момент я не могу придумать никаких идей.

mathiasF 05 фев. 2018, в 16:09

Источник

0

{img: src="..."} ?
I wrestled a bear once. 05 фев. 2018, в 14:40
0

forEach - предпочтительный способ посетить каждый элемент в массиве. Для удобства чтения я бы использовал filter перед forEach вместо if . .filter(image => image.category.includes(category)) .forEach(image => {...})
Aluan Haddad 05 фев. 2018, в 14:44
0

@Iwrestledabearonce Я не знаю, как добавить изображения в JS, я изменил, может быть, лучше я не знаю :(
mathiasF 05 фев. 2018, в 14:49
0

@Aluan Haddad Я вижу немного того, что ты хочешь сделать. я попробую
mathiasF 05 фев. 2018, в 14:51
1

Вы можете поместить URL-адреса в атрибуты DOM как data-src , а затем посетить их в JavaScript с помощью element.dataset.src .
Nianyi Wang 05 фев. 2018, в 14:53
0

@Nianyi Wang На самом деле мне бы очень хотелось, чтобы в доме был только один div. Я не знаю, возможно ли это.
mathiasF 05 фев. 2018, в 14:55
0

@NianyiWang какая польза от этого? Зачем их хранить в DOM, если ими манипулируют только в JavaScript? HTML отстой для данных
Aluan Haddad 05 фев. 2018, в 15:28
0

@AluanHaddad извините, мой плохой, я неправильно понял вопрос, это должна была быть data-category , если вы можете понять мою точку зрения.
Nianyi Wang 05 фев. 2018, в 15:34
0

@mathiasF Вы пытаетесь хранить 2 разных типа данных ( <a> & & <img> ) в одном контейнере, что логически неверно. Но есть некоторые хитрости CSS, если вы действительно хотите это сделать. Кстати проверить мой ответ! ;-)
Nianyi Wang 05 фев. 2018, в 15:36
0

@NianyiWang да, я так думаю. Вы получаете корреляцию заранее и вам не нужно отображать ее обратно на элемент, но недостатком является то, что вы ограничены синтаксисом HTML, а ваши данные должны быть статичными
Aluan Haddad 05 фев. 2018, в 15:37
0

@AluanHaddad Idk, кажется, что данные категории связаны с DOM. Это будет действительно больно в заднице, чтобы синхронизировать их в ванильном HTML 5.
Nianyi Wang 05 фев. 2018, в 15:41
0

@NianyiWang да я не знаю, просто обсуждаю это
Aluan Haddad 05 фев. 2018, в 15:46

Показать ещё 10 комментариев

Теги:

javascript

5 ответов

2

Вот попытка, не знаю, если я поймал вас на 100%

const partners = [
  {img: src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP267XEMpkNGK6SFQ97S0H417cdi3wwu6PtweMTOGSPreaJqFJWQ", category: [0,1,3]},
  {img: src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8YvxkmxhzlS3EQ9nmwODbfDvxzdYZZCbBl_Q3mkw53qH8QIv0hQ", category: [0,2]},
  {img: src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGV9LR9tr0hSWJdUcD15OSk7p3X47sy4QFBB6SLOQXQYt7G8AnfA", category: [0,1,2]},
  {img: src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg", category: [0,1,2]},
  {img: src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27", category: [0,2,3]},
  {img: src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27", category: [0,2]},
  {img: src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUgwZXDhsiXxNBQ8KAxFvVcOGU0mMd8gohhRf5OP4z0NOjeO6N", category: [0,3]},
];

function showImg(category) {
  const createDiv = $("#container")
  /* creatDiv = is the div that will surround every img */
  var index = $(category).index();
   $(createDiv).html(""); // clear data.
  $(partners).each(function(){
    if (this.category.find(function(v) { return v== index}) != undefined)
      $(createDiv).append($("<img style='width:50px' src='"+this.img+"' />"));
  
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">
    <a onclick="showImg(this)" class="link__color">All</a><!--category: 0-->
    <a onclick="showImg(this)" class="link__color">category-1</a>
    <a onclick="showImg(this)" class="link__color">category-2</a>
    <a onclick="showImg(this)" class="link__color">category-3</a>
  </div>

  <div id='container' class="container">
    <!-- <div class="container__img"><img class="img" src=""></div> -->
  </div>

Alen.Toma 05 фев. 2018, в 12:40

0

ВАУ большое спасибо. Тем не менее, я хотел бы не устанавливать jquery. Я постараюсь найти что-то похожее в чистом javascript. Но большое спасибо
mathiasF 05 фев. 2018, в 14:54

1

Здесь моя версия (без jquery). Я старался как можно ближе придерживаться исходного кода.

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
<body>
  <div class="link">
    <a onclick="showImg(0)" class="link__color">All</a><!--category: 0-->
    <a onclick="showImg(1)" class="link__color">category-1</a>
    <a onclick="showImg(2)" class="link__color">category-2</a>
    <a onclick="showImg(3)" class="link__color">category-3</a>
  </div>

  <div class="container">
      <div class="container__img" id='container_img'><img class="img" src=""></div>
  </div>

</body>
</html>

JS

var partners = [
{img: "src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP267XEMpkNGK6SFQ97S0H417cdi3wwu6PtweMTOGSPreaJqFJWQ'", category: [0,1,3]},
{img: "src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8YvxkmxhzlS3EQ9nmwODbfDvxzdYZZCbBl_Q3mkw53qH8QIv0hQ'", category: [0,2]},
{img: "src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGV9LR9tr0hSWJdUcD15OSk7p3X47sy4QFBB6SLOQXQYt7G8AnfA'", category: [0,1,2]},
{img: "src='https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg'", category: [0,1,2]},
{img: "src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27'", category: [0,2,3]},
{img: "src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27'", category: [0,2]},
{img: "src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUgwZXDhsiXxNBQ8KAxFvVcOGU0mMd8gohhRf5OP4z0NOjeO6N'", category: [0,3]},
];


function showImg(category) {
    var createDiv = document.createElement('div').setAttribute('class', 'container__img');
    /* creatDiv = is the div that will surround every img */
    createDiv = document.getElementById('container_img');
    createDiv.innerHTML = '';
    partners.forEach(function(partner) {
        if(partner.category.indexOf(category)!=-1) {
            createDiv.innerHTML = createDiv.innerHTML + '<img ' + partner.img + '>';
        }
    });
}

Chris Lear 05 фев. 2018, в 13:24

0

Ах, я не думал, что мы могли бы сделать это таким образом. Спасибо, это идеальный ответ.
mathiasF 05 фев. 2018, в 15:11
0

Однако я не понимаю, почему .container__img CSS не применяется. Если они создаются динамически, мне тоже нужно динамически добавлять CSS? Или что CSS должен добавить к #container__img?
mathiasF 05 фев. 2018, в 15:19
2

Я не уверен, что понимаю этот вопрос. Что за CSS? Возможно, вы путаете имя класса (container__img) с идентификатором div (container_img). Количество подчеркиваний - это разница.
Chris Lear 05 фев. 2018, в 15:33
0

На самом деле я виноват, что скопировал код и не увидел его, но вы не поместили ссылку на страницу js. <script src="script.js"></script>
mathiasF 05 фев. 2018, в 15:59
0

И поэтому я не понял, почему код не работает.
mathiasF 05 фев. 2018, в 16:00
1

Правда. У меня не было этого файла, поэтому я не включил его.
Chris Lear 05 фев. 2018, в 17:23

Показать ещё 4 комментария

1

Вот мой взгляд на то, что, я думаю, вы имеете в виду:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <div class="link">
        <a onclick="showImg(0)" class="link__color">All</a>
        <!-- Or:
        <a onclick="showImg([1,2,3])" class="link__color">All</a>
        -->
        <a onclick="showImg(1)" class="link__color">category-1</a>
        <a onclick="showImg(2)" class="link__color">category-2</a>
        <a onclick="showImg(3)" class="link__color">category-3</a>

        <!-- An additional example -->
        <a onclick="showImg([1,3])" class="link__color">category-1&3</a>
    </div>

    <div class="container"></div>
</body>

</html>

.link__color {
    margin: 10px;
    cursor: pointer;
    font-size: 24px;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.container .container__img {
    margin: 15px;
    width: 200px;
    height: 130px;
    background-color: red;
}

.img {
    width: 200px;
    height: 150px;
}

const partners = [
    {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP267XEMpkNGK6SFQ97S0H417cdi3wwu6PtweMTOGSPreaJqFJWQ'', category: [0,1,3]},
    {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8YvxkmxhzlS3EQ9nmwODbfDvxzdYZZCbBl_Q3mkw53qH8QIv0hQ'', category: [0,2]},
    {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGV9LR9tr0hSWJdUcD15OSk7p3X47sy4QFBB6SLOQXQYt7G8AnfA'', category: [0,1,2]},
    {img: 'src='https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg'', category: [0,1,2]},
    {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27'', category: [0,2,3]},
    {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27'', category: [0,2]},
    {img: 'src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUgwZXDhsiXxNBQ8KAxFvVcOGU0mMd8gohhRf5OP4z0NOjeO6N'', category: [0,3]},
];

function showImg(category) {
    category = typeof category === 'number' ? [category] : category
    const container = document.querySelector(".container");

    container.innerHTML = "";

    partners.forEach(image => {
        // This will compare the requested categories with the images categories
        // E.g.
        // searching for: [2]
        // image categories: [0,2,3]
        // output: [2]

        // Then check the length to see whether we can show the image
        if (image.category.filter(e => ~category.indexOf(e)).length) {
            // Image is in categories

            // Create the elements
            const div = document.createElement('div');
            const img = document.createElement('img');

            // Add the classes
            div.className = 'container__img';
            img.className = 'img';

            // add the image source
            img.src = image.img.replace(/src='([^']+)'/, "$1");

            // Append to the correct locations.
            div.appendChild(img);
            container.appendChild(div);
        }
    });
}

scagood 05 фев. 2018, в 12:51

0

Большое спасибо за ваш ответ, я тоже не думал о регулярном выражении. Это очень интересно. Я попробую это на.
mathiasF 05 фев. 2018, в 15:12
0

Добавление атрибутов onclick для каждого <a> кажется немного излишним ... Вы можете обработать их с помощью forEach или перехватить их в родительском событии click. (Я предпочитаю событие, потому что связывание нескольких событий - пустая трата воспоминаний ...)
Nianyi Wang 05 фев. 2018, в 15:20
0

Здесь тоже не понимаю почему контейнер css не отображается
mathiasF 05 фев. 2018, в 15:21
0

Я пытался держать свой пример как можно ближе к предоставленному коду, @NianyiWang
scagood 05 фев. 2018, в 15:24
0

@scagood хаха хорошо круто
Nianyi Wang 05 фев. 2018, в 15:25
0

Как вы имеете в виду @mathiasF? Вот ответвление вашего плана : plnkr.co/edit/Jq8JfBO8kOhOoQBmPHKG?p=preview , мне кажется , что изображения обертывают?
scagood 05 фев. 2018, в 15:27
0

@mathiasF, я вижу возникшую проблему, ваше правило css: .contain__img где в качестве класса, который вы нам дали, был .container__img
scagood 05 фев. 2018, в 15:40
0

@scagood Да, я тоже заметил, большая ошибка с моей стороны.
mathiasF 05 фев. 2018, в 15:55

Показать ещё 6 комментариев

1

Что-то вроде этого:

<div id="src">
    <a data-category="0">category-0</a>
    <a data-category="1">category-1</a>
    <a data-category="2">category-2</a>
    <a data-category="3">category-3</a>
</div>
<div id="container"></div>
<script>{
    const images = [
        {
            src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP267XEMpkNGK6SFQ97S0H417cdi3wwu6PtweMTOGSPreaJqFJWQ',
            category: [0, 1, 3]
        },
        {
            src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8YvxkmxhzlS3EQ9nmwODbfDvxzdYZZCbBl_Q3mkw53qH8QIv0hQ',
            category: [0, 2]
        },
    ],
    container = document.getElementById('container'),
    GenerateImg = src => {
        let img = new Image();
        img.src = src;
        return img;
    };
    document.getElementById('src').addEventListener(
        'click',
        e => {
            container.innerHTML = '';
            (
                category => images.filter(image => image.category.indexOf(category) !== -1).map(image => GenerateImg(image.src))
            )(+e.target.dataset.category).reduce((placeholder, current) => container.appendChild(current), void 0);
        }
    );
}</script>

Nianyi Wang 05 фев. 2018, в 12:18

0

Вы можете заменить метод GenerateImg на любые структуры DOM, например, <img> обернутые <div> .
Nianyi Wang 05 фев. 2018, в 15:16

Ещё вопросы

forEach - предпочтительный способ посетить каждый элемент в массиве. Для удобства чтения я бы использовал filter перед forEach вместо if . .filter(image => image.category.includes(category)) .forEach(image => {...})
@Iwrestledabearonce Я не знаю, как добавить изображения в JS, я изменил, может быть, лучше я не знаю :(
@Aluan Haddad Я вижу немного того, что ты хочешь сделать. я попробую
Вы можете поместить URL-адреса в атрибуты DOM как data-src , а затем посетить их в JavaScript с помощью element.dataset.src .
@Nianyi Wang На самом деле мне бы очень хотелось, чтобы в доме был только один div. Я не знаю, возможно ли это.
@NianyiWang какая польза от этого? Зачем их хранить в DOM, если ими манипулируют только в JavaScript? HTML отстой для данных
@AluanHaddad извините, мой плохой, я неправильно понял вопрос, это должна была быть data-category , если вы можете понять мою точку зрения.
@mathiasF Вы пытаетесь хранить 2 разных типа данных ( <a> & & <img> ) в одном контейнере, что логически неверно. Но есть некоторые хитрости CSS, если вы действительно хотите это сделать. Кстати проверить мой ответ! ;-)
@NianyiWang да, я так думаю. Вы получаете корреляцию заранее и вам не нужно отображать ее обратно на элемент, но недостатком является то, что вы ограничены синтаксисом HTML, а ваши данные должны быть статичными
@AluanHaddad Idk, кажется, что данные категории связаны с DOM. Это будет действительно больно в заднице, чтобы синхронизировать их в ванильном HTML 5.
@NianyiWang да я не знаю, просто обсуждаю это
ВАУ большое спасибо. Тем не менее, я хотел бы не устанавливать jquery. Я постараюсь найти что-то похожее в чистом javascript. Но большое спасибо
Ах, я не думал, что мы могли бы сделать это таким образом. Спасибо, это идеальный ответ.
Однако я не понимаю, почему .container__img CSS не применяется. Если они создаются динамически, мне тоже нужно динамически добавлять CSS? Или что CSS должен добавить к #container__img?
Я не уверен, что понимаю этот вопрос. Что за CSS? Возможно, вы путаете имя класса (container__img) с идентификатором div (container_img). Количество подчеркиваний - это разница.
На самом деле я виноват, что скопировал код и не увидел его, но вы не поместили ссылку на страницу js. <script src="script.js"></script>
И поэтому я не понял, почему код не работает.
Правда. У меня не было этого файла, поэтому я не включил его.
Большое спасибо за ваш ответ, я тоже не думал о регулярном выражении. Это очень интересно. Я попробую это на.
Добавление атрибутов onclick для каждого <a> кажется немного излишним ... Вы можете обработать их с помощью forEach или перехватить их в родительском событии click. (Я предпочитаю событие, потому что связывание нескольких событий - пустая трата воспоминаний ...)
Здесь тоже не понимаю почему контейнер css не отображается
Я пытался держать свой пример как можно ближе к предоставленному коду, @NianyiWang
Как вы имеете в виду @mathiasF? Вот ответвление вашего плана : plnkr.co/edit/Jq8JfBO8kOhOoQBmPHKG?p=preview , мне кажется , что изображения обертывают?
@mathiasF, я вижу возникшую проблему, ваше правило css: .contain__img где в качестве класса, который вы нам дали, был .container__img
@scagood Да, я тоже заметил, большая ошибка с моей стороны.
Вы можете заменить метод GenerateImg на любые структуры DOM, например, <img> обернутые <div> .

Occam's Razor · Accepted Answer · 2018-02-05T13-21-00.000Z

Вероятно, вы хотите удалить src= части из (исходной версии) объекта ваших partners.
Вашим ссылкам нужен атрибут href или они не будут выглядеть как ссылки, им также нужно return false или предотвратить по умолчанию, они также должны включать категорию в параметры.
Фильтрация массива методом filter.
Создайте и добавьте каждое изображение в контейнер.

const partners = [
  {img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP267XEMpkNGK6SFQ97S0H417cdi3wwu6PtweMTOGSPreaJqFJWQ", category: [0,1,3]},
  {img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8YvxkmxhzlS3EQ9nmwODbfDvxzdYZZCbBl_Q3mkw53qH8QIv0hQ", category: [0,2]},
  {img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGV9LR9tr0hSWJdUcD15OSk7p3X47sy4QFBB6SLOQXQYt7G8AnfA", category: [0,1,2]},
  {img: "https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg", category: [0,1,2]},
  {img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27", category: [0,2,3]},
  {img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27", category: [0,2]},
  {img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUgwZXDhsiXxNBQ8KAxFvVcOGU0mMd8gohhRf5OP4z0NOjeO6N", category: [0,3]},
];


function showImg(category) {
  const container = document.querySelector(".container");
  container.innerHTML = "";
  const filteredImages = partners.filter(itm => ~itm.category.indexOf(category));
  filteredImages.forEach(itm => {
    const createDiv = document.createElement('div');
    createDiv.setAttribute('class', 'container__img');
    var img = new Image();
    img.onload = function() {
      createDiv.appendChild(img);
      container.appendChild(createDiv);
    };
    img.src = itm.img
  });
  return false;
}

.container__img{
  display: inline-block;
  width: 100px;
}

.container__img img{
  max-width: 100%;
}

<div class="link">
  <a href=# onclick="showImg(0)" class="link__color">All</a>
  <!--category: 0-->
  <a href=# onclick="showImg(1)" class="link__color">category-1</a>
  <a href=# onclick="showImg(2)" class="link__color">category-2</a>
  <a href=# onclick="showImg(3)" class="link__color">category-3</a>
</div>

<div class="container">
  <!-- <div class="container__img"><img class="img" src=""></div> -->
</div>

Большое спасибо, я попробую это прямо сейчас :)
В теге all отсутствует категория 0, здесь должны отображаться все изображения
@Iwrestledabearonce Я не знал этот знак (~). Мне потребовалось много времени, чтобы понять то, что я знаю, но это действительно интересно :). Спасибо
Я пытаюсь иметь категорию all по умолчанию, когда я прихожу на страницу. Я пробовал несколько решений в Интернете, но ничего не работает, я думал, что добавления return false в onclik было достаточно. Но увы, это все еще не работает. Если у кого есть идея?
@mathiasF ... добавьте это в конец вашего скрипта ... $(()=>showImg(0));