Question

由于某些原因，我的代码无效，因为它没有添加类。

我想在点击<a>时添加一个类，再次点击时应删除它。再次点击时，应该添加等等。

我错过了什么？

HTML：

<a class="show-specs" id="displayText" href="javascript:toggle();">Show specs</a>

脚本：

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
            .addClass( "left-float" );
        text.innerHTML = "Show specs";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide specs";
    }
} 
</script>

Answer 1

您需要在jQuery方法之前添加selector，如下所示：

$("#displayText").addClass( "left-float" );

字符串"#displayText"表示选择ID为"displayText"的元素。

虽然有一种更好的方法可以使用.toggleClass()在jQuery中执行此操作，例如：

$("#displayText").click(function() {
    $(this).toggleClass("left-float");
});

Demo

由于您使用jQuery附加事件处理程序，因此请将href替换为#：

<a class="show-specs" id="displayText" href="#">Show specs</a>

Answer 2

使用ele.className += "left-float";

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
            text.className += "left-float";
        text.innerHTML = "Show specs";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide specs";
    }
} 
</script>

Answer 3

所以我在这里看到了2个问题。首先，你的代码缺少选择器 - 以及jquery绑定的jQuery / $变量 - 因此你实际上并没有调用任何东西。

第二个问题与你用jquery混合太多传统javascript的事实有关 - 这可能会导致混淆，因为某些东西看起来像它的工作而其他东西似乎都会失败。

这是您可以使用的一段工作代码。

<!-- Ensure you include jquery -->    
<script language="javascript"> 
function toggle() {
    var ele = $("#toggleText");
    var text = $("#displayText");
    if(ele.is(":visible")) {
        ele.hide();
        text.addClass("left-float");
        text.text("Show specs");
    } else {
        ele.show();
        text.removeClass("left-float");
        text.text("Hide specs");
    }
} 
</script>
<style>
// DEFINE THE CLASS "left-float" HERE
</style>

<a class="show-specs" id="displayText" href="javascript:toggle();">Show specs</a>

希望这有帮助！

jQuery添加类不能正常工作

3 个答案: