jQuery添加类不能正常工作

jQuery add class not working well

本文关键字：工作 常工作 添加 不能 jQuery      更新时间：2023-09-26

由于某些原因，我的代码不工作，因为它没有添加一个类。

我想在点击<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>

您需要在jQuery方法之前添加一个选择器，如下所示:

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

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

虽然有一个更好的方法来做到这一点在jQuery使用.toggleClass()，如:

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

因为你正在使用jQuery附加一个事件处理程序替换href与#:

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

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

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

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

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

<!-- 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>

希望这对你有帮助!

相关文章：