Question

请参阅以下代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul li {
                BACKGROUND: url('Close.png');
                background-repeat: no-repeat;
                background-position: center;
                background-position: right;
                background-color: orange;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(function() {
                $("li").click(function() {
                    var bg = $(this).css('background-image');
                    bg = bg.replace('url(', '').replace(')', '');
                    alert(bg);
                });
            });
        </script>
    </head>
    <body>
        <div style="width:500px;">div (grandparent)
            <ul>
                <li>li (child) (grandchild)</li>
                <li>li (child) (grandchild)</li>
                <li>li (child) (grandchild)</li>
                <li>li (child) (grandchild)</li>
                <li>li (child) (grandchild)</li>
            </ul>
        </div>
    </body>

</html>

JSFiddle Here：http://jsfiddle.net/VFGsU/

如果您看到上面的代码，那么在变量“bg”中我会得到li元素的背景图片的网址。

我想在这个url上调用jQuery的remove（）方法（即在变量bg上）....

实际上，我希望在用户点击此背景图片时实现这一目标，然后必须从li移除特定的ul。

如何实现这一目标？

Answer 1

Updated DEMO

<强> HTML

在li

中附上span的文字

<li><span>li (child) (grandchild)1</span></li>

<强> JS

$(function () {
    $("li").click(function () {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(', '').replace(')', '');
        $(this).remove();
    });
    $('li span').click(function (e) {
        e.stopPropagation(); //if click on text no action
    });
});

DEMO

$(function () {
    $("li").click(function () {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(', '').replace(')', '');
        alert(bg);
        $(this).remove(); //remove clicked li
    });
});

Answer 2

听起来你想要找到他们是否碰巧点击LI里面的背景图片的“位置”...这比你制作一个子标签并检查是否有儿童标签要复杂得多点击了......因为你必须测试鼠标位置等等。但是，如果你在LI里面有一个内部标签......这很容易。所以，我想说这是一个更好的方法：

CSS
li > .remove { display:inline-block;width:20px;height:20px;
    background-image: close.png; }

HTML
<li data-toggle='remove'><span class='remove'></span></li>

JAVASCRIPT
$(document).on('click', '[data-toggle=remove]', function(e) {
    var $clickedTag = $(e.target);
    if( $clickedTag.hasClass('remove') ) {
        $(this).remove();
    }
}

如果需要，可以将LI位置设置为relative：和.remove类位置：absolute，并且可以将关闭按钮定位在相对于LI标签的任何位置。

如何在背景图像上调用jQuery中的click事件？

JSFiddle Here：http://jsfiddle.net/VFGsU/

2 个答案: