Question

所以我试图在页面加载后更改div的背景颜色。具有背景和img的div在li里面。当鼠标进入.dlmain div时，我检查img src并根据img src给div .darkbg一个背景

问题：第一次和第二次显示正确的img src然后在下一个div我输入它显示前面的div img src。我有大约100个鼠标进入鼠标，背景颜色应该改变

我应该在这里有一个.each功能吗？我试了这个没有运气

$(document).ready(function () {
    $(document).on("mouseenter", ".dlmain", function () {
        if ($('.carimg').attr('src') == '/css/1359532013.jpg') {

            $(".darkbg").css({
                "backgroundColor": "#EE1C25"
            });
            alert($('.carimg').attr('src'));

        } else if ($('.carimg').attr('src') == '/css/1359532047.jpg') {
            $(".darkbg").css({
                "backgroundColor": "blue"
            });
            alert($('.carimg').attr('src'));

        } else {
            alert($('.carimg').attr('src'));
        }
    });

});

这是HTML：

<li id="13592635281366253285" class="myli" style="width:170px;height:170px;">
    <div class="favs"></div>
    <div class="mylimg" style="background:url(/images/th135926352813662532851.jpg) 50% 50% no-         repeat;"></div>
    <div class="darkbg" style="background-color: rgb(238, 28, 37); opacity: 0;"></div>
    <div class="dlprice">$69.99</div>
    <div class="dlmain" style="top: 153px;">
    <img class="carimg" src="/css/1359532047.jpg">
</li>
    <li id="13592635281366253092" class="myli" style="width:170px;height:170px;">
    <div class="favs"></div>
    <div class="mylimg" style="background:url(/images/th135926352813662530921.jpg) 50% 50% no-repeat;"></div>
    <div class="darkbg" style="background-color: rgb(238, 28, 37); opacity: 0;"></div>
    <div class="dlprice">$59.99</div>
    <div class="dlmain" style="top: 153px;">
    <img class="carimg" src="/css/1359532013.jpg">
</li>

Thank you in advanced for any help

Answer 1

您需要找到相对于当前悬停元素的元素。您需要使用与输入的carimg元素相同的darkbg定位li和dlmain元素。因此，使用.closest()查找li元素，然后在li元素中使用.find()来查找其他2个元素

尝试

$(document).ready(function () {
    $(document).on("mouseenter", ".dlmain", function () {
        var $li = $(this).closest('li'),
            src = $li.find('.carimg').attr('src'),
            $darkbg = $li.find('.darkbg')
            if (src == '/css/1359532013.jpg') {
                $darkbg.css({
                    "backgroundColor": "#EE1C25"
                });
            } else if (src == '/css/1359532047.jpg') {
                $darkbg.css({
                    "backgroundColor": "blue"
                });
            } else {}
        alert(src);
    });
});

可以应用的另一个调整是

$(document).ready(function () {
    var backgrounds = {
        '/css/1359532013.jpg': '#EE1C25',
        '/css/1359532047.jpg': 'blue'
    };
    $(document).on("mouseenter", ".dlmain", function () {
        var $li = $(this).closest('li'),
            src = $li.find('.carimg').attr('src'),
            $darkbg = $li.find('.darkbg');

        $darkbg.css({
            "backgroundColor": backgrounds[src]
        });
        alert(src);
    });
});

Answer 2

如果每个div有不同的'.carimg'，你应该选择特定的。 $（'。carimg'）。attr（'src'）为所有div提供相同的值。

如果img'。carimg'和div'.darkbg'在当前div'.dlmain'中，请尝试以下操作：

$(document).ready(function () {
    $(document).on("mouseenter", ".dlmain", function () {
        var $this=$(this);
        if ($this.find(‘.carimg').attr('src') == '/css/1359532013.jpg') {

            $this.find(“.darkbg").css({
                "backgroundColor": "#EE1C25"
            });
            alert($this.find('.carimg').attr('src'));

        } else if ($this.find('.carimg').attr('src') == '/css/1359532047.jpg') {
            $this.find(".darkbg").css({
                "backgroundColor": "blue"
            });
            alert($this.find('.carimg').attr('src'));

        } else {
            alert($this.find('.carimg').attr('src'));
        }
    });

});

根据img src更改背景JQuery

2 个答案: