1

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

我可以通过将 (class="mat" 的 "class" 更改为 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/上看到的那样，
单击下面的列表后，鼠标悬停操作无法正常工作。

单击按钮的“类”应更改为“..._s”，
（class="mat" 到 class="mat_s"）
但“..._s”立即更改为“..._c”。



谢谢，

4

2 回答 2

0

尝试使用hover来实现mouseover和mouseout，比如

  $("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 回答
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 回答