javascript - 更改数组内项目的透明度

我要做的是更改jpg的透明度。我已将ul li img放入数组中。



单击图像时，可以在控制台中看到阵列中单击图像的位置。



现在，当我单击图像时，我想更改该图像的透明度以及单击的图像之前的图像的透明度。

因此，例如：当我单击位于数组内部4处的图像时。我希望将数组中的项目0、1、2、3和4的透明度设置为1。如何访问数组中单击项的CSS？

的HTML

<ul id="people">
    <li><img src="person.jpg" alt="person" id="img1"></li>
    <li><img src="person.jpg" alt="person" id="img2"></li>
    <li><img src="person.jpg" alt="person" id="img3"></li>
    <li><img src="person.jpg" alt="person" id="img4"></li>
    <li><img src="person.jpg" alt="person" id="img5"></li>
    <li><img src="person.jpg" alt="person" id="img6"></li>
    <li><img src="person.jpg" alt="person" id="img7"></li>
    <li><img src="person.jpg" alt="person" id="img8"></li>
    <li><img src="person.jpg" alt="person" id="img9"></li>
    <li><img src="person.jpg" alt="person" id="img10"></li>
</ul>

的CSS

ul li {
    display: inline-block;
    text-decoration: none;
    list-style-type: none;
}

img{
    width: 90px;
    opacity: 1;
}

JS

$( document ).ready(function() {
    $('ul').transition({ opacity: 0.1, delay: 500 });

    jQuery(function(){
        var peopleArray = [];

        $('#people li img').each(function(){
            peopleArray.push(this);
        })
        console.log(peopleArray);

        $('ul li img').click(function() {
            console.log(($('ul li img').index(this)));
        });
    });

图书馆

我正在使用jquery-transit：

http://ricostacruz.com/jquery.transit/

最佳答案

尝试这个

$('#people li img').on("click",function() {
  // you likely also want to reset
  $(this).closest("ul")
    .find("img").transition({ opacity: 0.1, delay: 500 });
  $(this).closest("li").prevUntil().andSelf()
    .find("img").transition({ opacity: 1, delay: 500 });
});

您可能希望将一个放在回调中以保持闪烁状态

关于javascript - 更改数组内项目的透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27669345/