-1

以下のコードを参照してください:

<!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 ここ: http://jsfiddle.net/VFGsU/

上記のコードが表示された場合、変数 "bg" でli要素の背景画像の URL を取得しています。

このURL（つまり、変数bg）でjQueryのremove（）メソッドを呼び出したい...

実際には、ユーザーがこの背景画像をクリックしたときに、その特定liのものを から削除する必要があることを達成したいと考えていますul。

これはどのように達成できますか？

4

2 に答える 2

0

更新されたデモ

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
    });
});

デモ

$(function () {
    $("li").click(function () {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(', '').replace(')', '');
        alert(bg);
        $(this).remove(); //remove clicked li
    });
});
于 2013-08-12T15:04:19.990 に答える
0

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 を position:relative にし、.remove クラスの position:absolute を作成すると、閉じるボタンを LI タグに対して任意の場所に配置できます。

于 2013-08-12T15:21:25.390 に答える