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/

切换.click（）方法

2 个答案: