jQuery将CSS添加到当前li js

时间:2018-11-16 15:38:50

标签: html css html-lists

我有以下代码。当我点击添加删除图像我正在更改字体真棒图标时,我也想更改心形div的样式。如何执行此操作,因为现在heart div的样式仅针对第一个li进行了更改。

<ul id="gallery">
<li>
<div id="heart" style="display: none;"></div>
some text
<i class="add-remove-image fas fa-check"></i>
</li>
..
</ul>

$('.add-remove-image').on('click', function() {
    if(!$(this).hasClass('image-added')) {
        imgArr.push($(this).parent().parent().find('img').attr('src'));

        $(this).addClass('image-added');
        $(this).removeClass('fa-check');
        $(this).addClass('fa-times');
        $('#heart').css("display", "block");        
    }
    else {
        var index = imgArr.indexOf($(this).parent().parent().find('img').attr('src'));
        if (index > -1) {
            imgArr.splice(index, 1);
        }

        $('#heart').css("display", "none");
        $(this).removeClass('fa-times');
        $(this).addClass('fa-check');
        $(this).removeClass('image-added');
    }
});

1 个答案:

答案 0 :(得分:0)

尝试一下。 代替

$('#heart').css("display", "block");

使用此

$(this).parent().find('#heart').css("display", "block");

“ else:”语句中的类似符号,而不是

$('#heart').css("display", "none");

使用此

$(this).parent().find('#heart').css("display", "none");

希望这会为您效劳。