响应式图像布局

Question

所以我有多个具有相同类的 div，其中的图像可以从 1 到 4，具体取决于 div，我事先不知道有多少图像，因为它们来自数据库。 如何根据 div 中有多少给图像赋予不同的类。我的html

<section class="feed-section">
    <article class="feed-article">
        <div class="question-options">
            <img src="http://placehold.it/600x400">
        </div>
    </article>
    <article class="feed-article">
        <div class="question-options">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
        </div>
    </article>
    <article class="feed-article">
        <div class="question-options">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
        </div>
    </article>
</section>

我的 js

function imagesWidth() {
    var imagesConatiner = $('.question-options').each(function (index) {
        var images = $(this).children('img').length;
        switch (images) {
        case 1:
            $('.question-options img').addClass('one')
            break;
        case 2:
            $('.question-options img').addClass('two')
            break;
        case 3:
            $('.question-options img').addClass('three')
            break;
        case 4:
            $('.question-options img').addClass('four')
            break;
        default:
            console.log(images)
        }
    })
};
imagesWidth()

现在的问题是它会向所有图像添加多个类，例如它为三个添加一个的所有图像

我想用 css 来做这些

img.one {
    width:100%
}
img.two {
    width:50%
}

等等……

Answer 1

您是否有特定的理由为每张图片添加特定的类？您可以使用纯 css flexbox 而不使用 javascript 来实现相同的效果（确保图像在设定的宽度上均匀分布）。

.question-options {
    display: flex;
    width: 500px;
    flex-direction: row;
    padding: 10px;
    background-color: blue;
}
.question-options div {
    flex: 1 1 auto;
}
.question-options img {
    width: 100%;
}

但是，您需要将图像包装在 div 中以使其工作：

<section class="feed-section">
  <article class="feed-article">
    <div class="question-options">
        <div><img src="http://placehold.it/600x400"></div>
    </div>
  </article>
  <article class="feed-article">
    <div class="question-options">
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
    </div>
  </article>
  <article class="feed-article">
    <div class="question-options">
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
    </div>
  </article>
</section>

小提琴：https://jsfiddle.net/grxp0gw1/

注意：Flexbox（还）不能很好地处理图像。感谢this post 和this fiddle，我才得以成功。

Answer 2

您的代码的问题在于您使用通用选择器在图像上添加类。 $('.question-options img') 将选择元素内具有question-options 类的所有图像。您可以使用find、children 和当前上下文（$(this)）或上下文选择器来选择each 内当前元素内的图像。

$('img', this).addClass('someclass');

这会将类添加到当前元素内的所有img 元素中。即.question-options 在其上进行迭代。

您的问题将通过使用上述任何一种方法来解决。

如果您正在寻找灵活和优化的解决方案，

1. 您可以使用索引作为图像数量和值作为类的数组
2. 将索引处的类添加到所有图像

// Create array for the classes, index will be treated as number of images and value is the class to add
// Modify the array according to the maximum number of elements
var classes = ['', 'one', 'two', 'three', 'four'];

function imagesWidth() {
  var imagesConatiner = $('.question-options').each(function(index) {

    // Get the value from the array at the index i.e. no. of images and add it as class to all the images inside this container
    $('img', this).addClass(classes[$(this).children('img').length]);
  })
};
imagesWidth();

img.one {
  width: 100%
}
img.two {
  width: 50%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section class="feed-section">
  <article class="feed-article">
    <div class="question-options">
      <img src="http://placehold.it/600x400">
    </div>
  </article>
  <article class="feed-article">
    <div class="question-options">
      <img src="http://placehold.it/600x400">
      <img src="http://placehold.it/600x400">
      <img src="http://placehold.it/600x400">
      <img src="http://placehold.it/600x400">
    </div>
  </article>
  <article class="feed-article">
    <div class="question-options">
      <img src="http://placehold.it/600x400">
      <img src="http://placehold.it/600x400">
      <img src="http://placehold.it/600x400">
    </div>
  </article>
</section>

Answer 3

你的代码应该是这样的：

function imagesWidth() {
    var imagesConatiner = $('.question-options').each(function (index) {
        var images = $(this).children('img').length;
        switch (images) {
        case 1:
            $(this).find('img').addClass('one')
            break;
        case 2:
            $(this).find('img').addClass('two')
            break;
        case 3:
            $(this).find('img').addClass('three')
            break;
        case 4:
            $(this).find('img').addClass('four')
            break;
        default:
            console.log(images)
        }
    })
};
imagesWidth()

您没有将父 div 引用为“this”，因此将类添加到所有“.question-options”子“img”标签。

Answer 4

问题在于您添加类的上下文，因为您获得了所有question-options 容器。试试这个：

function imagesWidth() {
    var imagesConatiner = $('.question-options').each(function (index) {
        var images = $(this).children('img').length;
        var self = $(this);

        switch (images) {
            case 1:
                self.children('img').addClass('one')
                break;
            case 2:
                self.children('img').addClass('two')
                break;
            case 3:
                self.children('img').addClass('three')
                break;
            case 4:
                self.children('img').addClass('four')
                break;
            default:
                console.log(images)
        }
    })
};
imagesWidth()

这是一个例子fiddle