Question

我有一些按钮（“ul.subjects li”）和...
1.通过鼠标移动操作更改按钮的背景图像 2.可以立即点击一个按钮因此，一旦点击按钮，其他人就会被取消。我有两个这个按钮列表，并通过点击的项目（主题和年龄）切换内容。

我可以通过改变（class =“mat”到class =“mat_c”）的“class”来切换背景图像。

$(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>算数・数学</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/上看到的那样，单击下面的列表后，鼠标悬停操作无法正常工作。

单击按钮的“类”应更改为“... _ s”，
（class =“mat”to class =“mat_s”）
但“......_ s”立即改为“...... _ c”。

谢谢，

Answer 1

尝试使用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

Answer 2

The result（我已移除底部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;
    } );
} );

Javascript，通过鼠标悬停和点击切换图像

2 个答案: