1

簡単な順序付きリストがあります。

<ol>
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ol>

私はjQueryを使用して、リスト内のアイテムを並べ替えるためにドラッグアンドドロップできる並べ替え可能なリストを作成しています。ただし、ユーザーが「x」アイコンをクリックしてリストアイテムを削除できるようにしたいのですが、通常、順序付きリスト番号がホバーされています。右側はすでに「移動」アイコン（3本の横線）で使用されています。

リスト項目2にカーソルを合わせると、次のように表示されます。

1. one
X  two     =
3. three

2をanに置き換えて、Xクリックできるようにする必要があります。

（注：=上記は、移動ホバーアイコン（通常は3本の水平線）を表すことを目的としています。）

4

4 に答える 4

3

問題は、順序付きリストを順序なしリストに変更できないことです (そのようにその場で数値を X に交換するだけです)。

代わりに、番号がスパンタグに配置された順序付けられていないリストを用意し、X (画像/必要なもの) に交換できます。このようにして、削除イベントをそれにバインドするのも簡単です!

css ul li { list-style-type: none; }

<ul>
    <li><span>1.</span> one</li>
    <li><span>2.</span> two</li>
    <li><span>3.</span> three</li>
</ul>

jsFiddle デモ

$('ul li').each(function () { 
    var this$ = $(this),
        _old = $(this).find('span').text();

    this$.on({
        mouseover: function () {
            this$.find('span').text('X');
        }, 
        mouseout: function () {
            this$.find('span').text(_old);
        }
    });

    this$.find('span').on('click', function () {
         if ( $(this).text() === 'X') {
            if (confirm('Are you sure you want to Delete?')) {
                $(this).closest('li').remove();
            }
        }
    });
});
​
于 2012-08-23T19:48:04.603 に答える
1

画像を箇条書きとして使用するには、次の 3 つの方法があります。

  1. list-style-imageの箇条書きを置き換えるために使用し:hoverます。このアプローチの弱点は、画像を実際に配置することができず、画像のサイズによって制約されることです。

    http://jsfiddle.net/bnickel/tCTwJ/

    li:hover {
    list-style-image: url(x.png);
}

  2. を使用list-style-type: noneして箇条書きを非表示にし、:before疑似要素を使用して画像を配置します。これは IE7 では機能しません。

    http://jsfiddle.net/bnickel/LVsYW/

    li {
    position: relative;
}

li:hover {
    list-style-type: none;
}

li:hover:before {
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: -55px;
    background-image: url(x.png);
}

  3. 2 と同様に、要素のマージンとパディングを慎重に調整し、繰り返しのない背景画像を配置することができます。これはおそらく最も信頼できるアプローチですが、非常に特殊なスタイル セットに限定されます。

    http://jsfiddle.net/bnickel/LXe4C/

    li:hover {
    list-style-type: none;
    background-image: url(x.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
    margin-left: -55px;
    padding-left: 55px;
}​
于 2012-08-23T22:47:47.293 に答える
0

アイコンをスパンに配置して、絶対に配置できます。次に、LIのホバーで表示します。

http://jsfiddle.net/S3Ph8/1/

于 2012-08-23T19:55:49.707 に答える
0

アイテムを削除するための新しい css クラスを作成できます

li.remove
{
 background-image: url(remove.gif);
 background-repeat: no-repeat;
 background-position: 0 50%;
 padding: 3px 0 3px 20px;
 margin: .4em 0;
}

次に、ホバーイベントハンドラーを作成して、そのクラスを強調表示されたliに追加します

$('ul li').on('hover', function (){
  $(this).toggleClass('remove');
}).on('click', function(){
   alert($(this).text());    
//take some action
})

これは大まかなアイデアを提供するためのものです。要件に合わせて微調整する必要があります。もちろん、実際の gif も用意してください。

于 2012-08-23T19:56:59.660 に答える