使用javascript动态更改图片

时间：2018-02-05 14:35:35

标签： javascript

我希望根据他们的类别动态显示图片。我有4个按钮，第一个我想要显示所有图像和其他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）

认为它并不复杂，但目前我无法想到任何想法。

5 个答案:

答案 0 :(得分：3)

  1. 您可能希望从src=对象的（原始版本）删除partners部分。
  2. 您的链接需要href属性，或者它们看起来不像链接，它们还需要return false或防止默认，它们还需要在参数中包含类别..
  3. 使用filter方法过滤数组。
  4. 创建每个图像并将其附加到容器中。

    5. 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>

答案 1 :(得分：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>

答案 2 :(得分：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>

答案 3 :(得分：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 + '>';
        }
    });
}

答案 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);
        }
    });
}
相关问题
最新问题