-1

私はこのような背景画像を持つ単なるliであるボタンがたくさんあるこのインターフェースをやっています

#menu ul.icons li.nove {
    background-image:url(images/edit-menu/icons/undo.png);
    background-size:contain;
    display:block;
    margin-top:29px;
}

<ul class="icons"> 
<li class="um"></li>
    <li class="dois"></li>
    <li class="tres"></li>
    <li class="quatro"></li>
    <li class="cinco"></li>
<li class="seis"></li>
    <li class="sete"></li>
    <li class="oito"></li>
    <li class="nove"></li>
    <li class="dez"></li>
</ul>

ユーザーがボタンをクリックしたときにボタンの背景画像を変更するコードを作成する必要があります。そのボタンがアクティブであることを示すには、同じファイル名に変更url(images/edit-menu/icons/して保持するだけです。url(images/edit-menu/select/これを動的に行う方法が必要なので、10 個のボタンのそれぞれに対して行う必要はありません。

私が明確だったことを願っています、前もって感謝します

4

5 に答える 5

5

で何を意味するのかわかりませんがbutton、これを試すことができます：

$('.nove').click(function(){
   $(this).css('background-image', 'url(images/edit-menu/select/undo.png)');
})
于 2012-06-19T21:05:29.493 に答える
2

DOM 経由で css を変更するだけです。jQuery の例:

$('li.nove').click(function() {
    $(this).css('background-image', 'url(images/edit-menu/icons/icon2.png)');
});
于 2012-06-19T21:05:31.910 に答える
2

それぞれが異なるイメージを持っているので、パスを変更したいだけだと思います。

$('.icons').on('click', 'li', function(){
   var filename = $(this).css('background-image').split('/');
   filename = filename[filename.length - 1];
   filename = filename.substr(0, filename.length - 1);
   $(this).css('background-image', 'url(images/edit-menu/select/' + filename + ')');
});

これは背景画像を取得し、「/」で区切られて分割し、それらの最後の画像から 1 文字を引いたものを取得)し、それをファイル名として返します。次に、それを使用して背景画像を変更します。

ここに jsfiddle があります。実際の画像はありませんが、firebug または webkit インスペクターでソースを表示して、動作を確認できます。

于 2012-06-19T21:06:26.933 に答える
0

次のようにできます。

var btn = document.getElementById('buttonID');
btn.onclick = function() {
   for (var i = 0, i < document.getElementsByTagName('li').length; i++) {
     if (this.className === 'nove') {
        document.getElementsByTagName('li')[i].style.background = 'url('+ new path +')';
     }
   }
};
于 2012-06-19T21:06:49.537 に答える
0

次のようなもので簡単にできると思います（テストされていないjQueryで）：

$("#menu ul.icons li").click(function(){
    $(this).css('background-image', $(this).css('background-image').replace('icons', 'select'));
});

編集: jQuery >= 1.4 を使用している場合、より良い方法を見つけました。

$("#menu ul.icons li").click(function(){
    $(this).css('background-image', function(index, oldValue){
        return oldValue.replace('icons', 'select');
    });
});
于 2012-06-19T21:12:42.113 に答える