Question

我是jQuery的新手，我有一个包含7个项目的列表，每个项目包含一个图像和一个div。我正在尝试使用jQuery单击图像时将div背景颜色从黑色更改为橙色。使用第一个<li>元素它可以正常工作，但问题是在我点击另一个图像后，前一个div颜色仍然被点击。

codeIi'm使用.imageRecharge是图像类，而radioID是div类。我正在使用siblings()方法更改其他div，但它不起作用：

$(document).ready(function () {
    $('.imageRecharge').click(function () {
         $(this).parent().find('.radioID').css({ 'backgroundColor': '#FF6600', 'color': 'black' })
         $(this).parents().find(' .radioID').siblings().css({ 'backgroundColor': 'black', 'color': '#FF6600' });
    });
});

Answer 1

我认为您正在寻找background-color CSS属性（不是backgroundColor）

请注意，CSS通常使用划线分隔的属性名称，而不是尝试使用camelCase。

Answer 2

这是你想要完成的事情： http://jsfiddle.net/1e27hkxa/1/

JQuery的：

$('ul').on('click', '.imageRecharge', function() {
    $(this).parents().find('.radioID').css('background', 'black');
    $(this).parent().css('background', '#f60');
});

HTML： <ul> <li><div class="radioID"><img class="imageRecharge" src="" /></div></li> <li><div class="radioID"><img class="imageRecharge" src="" /></div></li> </ul>

CSS：

ul {
    list-style: none;
    padding: 0;
}
ul li {
    display: inline-block;
    background: #000;
}
ul li .radioID {
     padding:5px;   
}

img {
    display: block
}

Answer 3

使用jQuery更改div background color

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
          $("button").click(function(){
            $("div").addClass("myclass");
          });
        });
        </script>
        <style>
            .myclass {
              background-color: red;
              padding: 100px;
              color: #fff;
            }
        </style>
    </head>
    <body>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        <button>Click Here</button>
    </body>
</html>

如何在列表元素中更改div背景颜色？

3 个答案: