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

问题是您要添加类的内容，因为您获得了所有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

Answer 2

您的代码应为：

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 3

您的代码存在的问题是您使用常规选择器在图像上添加类。 $('.question-options img')将选择具有类question-options的元素内的所有图像。您可以将find，children与当前上下文（$(this)）或上下文选择器一起使用，以选择each内当前元素内的图像。

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

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

使用上述任何方法都可以解决您的问题。

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

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

＆＃13;

// 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();

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您是否有特定原因要为每张图片添加特定类？使用纯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我能够使其发挥作用。

响应式图像布局

4 个答案: