2

私はjQueryを初めて使用し、CSSクラスを上書きするテーマに問題があります。

ここに私のHTMLコードがあります:

<head>
  .clicked
  {
    text-decoration: line-through !important;
    color: #000000; 
  }
</head>
...
<div data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed icon="arrow-r" data-expanded-icon="arrow-d">
  <ul data-role="listview" id="Key"></ul>
</div>

これが私のJSです：

function WriteQuote(item) {
        $("#"+item).addClass(function(index, currentClass) {    
            if (currentClass.lastIndexOf("clicked") >= 0) {
                $("#"+item).removeClass("clicked");
                return; 
            }
            return "clicked";
        });
    }

私は toggleClass を使用する予定なので、このコードはテストのみを目的としています。Firebug を調べると、それa.ui-link-inheritが優先され、適用されることがわかります。

a.ui-link-inherit {
    text-decoration: none !important;
}
.clicked {
    color: #000000;
    text-decoration: line-through !important;
}

クラスで jQuery テーマのクラスを上書きする方法はありますか? 私の目標は、ユーザーが特定のリストビュー要素をクリックしたときに「ラインスルー」を切り替えることです。

4

1 に答える 1

5

テーマの CSS ルールが適用されるのは、それがあなたのものより具体的だからです。解決策は、ルールにさらに具体性を追加することです。

a.ui-link-inherit.clicked {
    color: #000000;
    text-decoration: line-through !important;
}

デモ: http://jsfiddle.net/wryE5/

于 2012-12-28T21:06:43.910 に答える