jquery - 切换 .click() 方法

Question

我的以下点击没有切换。我不想使用.toggle()方法。我正在使用 jquery 1.4.1

 $("#e_tooth_pk1").click(function () {
        $(this).css({ "background": "url(/DesktopModules/DMS/DMS.PatientEChart/images/line.gif) repeat-x scroll 0 19px transparent", "border": "1px solid #000", "-moz-box-sizing": "border-box" })
        $("#hid_tooth1").val("e_tooth1");
    }, function () {
        $(this).css({ "background-color": "transparent", "background": "none", "border": "none" })
        $("#hid_tooth1").val("0");
    });

Answer 1

你可以这样做：

var clicked = "first";
$("#e_tooth_pk1").click(function () {
    if( clicked == "first" ) {
        $(this).css({ "background": "url(/DesktopModules/DMS/DMS.PatientEChart/images/line.gif) repeat-x scroll 0 19px transparent", "border": "1px solid #000", "-moz-box-sizing": "border-box" });
        $("#hid_tooth1").val("e_tooth1");
        clicked = "second";
    }
    else if(clicked == "second") {
       $(this).css({ "background-color": "transparent", "background": "none", "border": "none" });
       $("#hid_tooth1").val("0");
       clicked = "first";
    }
});

Answer 2

我通常觉得css在一个设置中放置这么多样式有点笨拙。所以我建议使用类来存储你的样式并使用addClass,来操作它们removeClass，而hasClass不是这样做。（只是说）

.line {
    background : url(/DesktopModules/DMS/DMS.PatientEChart/images/line.gif) repeat-x scroll 0 19px transparent;
    border: 1px solid #000;
    -moz-box-sizing: border-box;
}
.no-line {
    background-color: transparent;
    background: none;
    border: none
}

您的 JS 代码如下所示：

$("#e_tooth_pk1").click(function () {
    $this = $(this);
    $this.toggleClass('no-line');
    if ($this.hasClass("no-line")) {
      //  $this.removeClass("no-line").addClass("line");
        $("#hid_tooth1").val("e_tooth1");
    } else {
      //  $this.removeClass("line").addClass("no-line");
        $("#hid_tooth1").val("0");
    }
});

演示：http: //jsfiddle.net/hBeCU/