1

私はいくつかのボタン（「ul.subjects li」）を持っています...
1.マウスオーバーアクションでボタンの背景画像を変更します
2.一度に1つのボタンをクリックできます。
　そのため、ボタンをクリックすると、他のボタンはキャンセルされます。このボタンのリストを 2 つ用意し、クリックした項目 (件名と年齢) で内容を切り替えます。

(class="mat" から class="mat_c") の「クラス」を変更することで、背景画像を切り替えることができます。

$(function(){
    $(document).delegate("ul.subjects li a", "mouseover", function(){
        $(this).data("imgc", $(this).attr("class"));
        var regex = /_s/;
        if (regex.test($(this).data("imgc")) == false ) {
        $(this).attr("class", $(this).data("imgc")+"_c")
        }
    });
    $(document).delegate("ul.subjects li a", "mouseout", function(){
        $(this).attr("class", $(this).attr("class").replace(/_c/, ""));
    });
});

<ul class="subjects">
    <li><a id="mat" class="mat" href="/age=all/sub=mat/"></a>算数・数学&lt;/li>
    <li><a id="soc" class="soc" href="/age=all/sub=soc/"></a>社会</li>
    <li><a id="sci" class="sci" href="/age=all/sub=sci/"></a>理科</li>
    <li><a id="eng" class="eng" href="/age=all/sub=eng/"></a>英語</li>
</ul>

ボタンクリック操作がうまくいかず、属性を class="..._s" に変更しようとしたところ
、すぐに class="..._c" に変更されました。

$(function(){
    $(document).delegate("ul.subjects li a", "click", function(){
        $("ul.subjects").html($("ul.subjects").html().replace(/_s/g, ""));
        $(this).attr("class", $(this).attr("class").replace(/_c/, "_s"));
    });
});

多分私はイベントやそれらの順序を制御する必要があります...
そしてこれを行うためのより簡単な方法があるはずです. これをどのように把握すればよいですか？

http://jsfiddle.net/MsdGS/1/でわかるように
、リストの下をクリックした後、マウスオーバー アクションが正しく機能しません。

クリックされたボタンの "class" は "..._s"
(class="mat" から class="mat_s")に変更する必要があります
が、"..._s" はすぐに "..._c" に変更されます。



ありがとう、

4

2 に答える 2

0

結果href（一番下のulリストから削除しました）

あなたの質問が正しいことを理解した場合、これはあなたが変更する必要があるものです：

$(function(){
    $("#course_tb").load("/age=all/sub=all/"+"#course_tb");
    $(document).delegate("ul.subjects li a", "click", function(){
        // iterate through `subjects`'s "a"
        $("ul.subjects li a").each(function(index, el){
            $(el).attr("class", $(el).attr("class").replace(/_s/g, ""));
        });
        //html($("ul.subjects").html().replace(/_s/g, ""));
        // ...
        return false;
    } );
} );
于 2012-08-18T16:21:21.957 に答える
0

hover次のように、マウスオーバーとマウスアウトを実装するために使用してみてください

  $("ul.subjects li a").hover(function() {
      $(this).css("background-image", "www.google.com");
     }, function() {
      $(this).css("background-image", "www.google.com");
     });

ご覧のとおりcss:background-image、背景画像を直接変更するために使用してみてください。これにより、問題が回避されます。

これがうまくいくことを願っています。

.hover() API

于 2012-08-18T12:29:04.703 に答える