2

ユーザーがクリックできるようにする一連のボタンをliとして作成しました。

<ul class="item_list">
<li class="item_button" id="128" style="color: #4bb2c5" data-seq= "0">1</li>
<li class="item_button" id="129" style="color: #EAA228" data-seq= "1">2</li>
<li class="item_button" id="130" style="color: #c5b47f" data-seq= "2">3</li>
<li class="item_button" id="131" style="color: #579575" data-seq= "3">4</li>
<li class="item_button" id="132" style="color: #839557" data-seq= "4">5</li>
<li class="item_button" id="133" style="color: #958c12" data-seq= "5">6</li>
<li class="item_button" id="134" style="color: #953579" data-seq= "6">7</li>
<li class="item_button" id="135" style="color: #4b5de4" data-seq= "7">8</li>
</ul>

関連するcssは次のとおりです。

.item_button{
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
        float:left;
    font-size:10pt;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
        width:120px;
        margin-top:12px;
}

.item_button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );

    background-color:#dfdfdf;
}
.item_button:active {
    position:relative;
    top:1px;
}

...そしてここに私のjQueryハンドラがあります:

$('.item_list li').click(function(){
    $('.item_list li').attr('class', 'item_button');
    $(this).attr('class','item_button_selected')
  });

これはすべて、Chrome と Safari で正常に機能します。ユーザーは、li のどこでもクリックでき、「クリック」します。IE では、ユーザーが "1"、"2" など、li 内のテキスト自体を直接クリックした場合にのみ、ホバー動作とクリックがキャッチされます。何が欠けていますか?

4

1 に答える 1

0

まず、同じことを繰り返すべきではないので、単一の変数で $(this) を使用するように jQuery を更新してみてください。

$('.item_list li').click(function() {

    var $this = $(this);

    $this.attr('class', 'item_button');
    $this.attr('class', 'item_button_selected');
});

第二に、私は elclanrs に同意します。toggleClass() を試して使用する必要があります。

あなたの IE の問題に関しては、IE9 と IE10 で動作します。どのバージョンが機能しませんか? IE の互換モードを使用していますか?

于 2013-12-13T11:33:47.297 に答える