jQuery add class not well well

由于某种原因，我的代码无法正常工作，因为它没有添加类。jQuery add class not well well

我想添加一个类，当点击<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>

来源

2016-09-19 Henk Z

你忘了'ele'在前面'.addClass（“left-float”）;'？ ...也确保'ele'不为null，并且'ele.style.display'确实是'block' ...顺便说一下，我在这里没有看到任何'jQuery'，只有香草JS – Josh

Just '.addClass（“left-float”）;'是无误的语法，你需要一个类似'$（...）。addClass（“left-float”）;'的点之前的选择器。 –

检查[你的控制台是否有错误。]（http://stackoverflow.com/documentation/javascript/185/hello-world/714/using-console-log）它会帮助你很多。 –

你需要一个jQuery的方法之前增加一个selector像这样：

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

字符串"#displayText"指与ID "displayText"选择的元素。

虽然有一个更好的方式jQuery来做到这一点通过使用.toggleClass()如：

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

Demo

由于您使用jQuery来附加事件处理函数替换在href #：

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

来源

2016-09-19 18:00:10

感谢您的帮助和解释！ –

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

来源

2016-09-19 17:47:00

谢谢！我试过了，但它没有把这个类加入到'' –

@HenkZ我们怎么知道这个？你从来没有说过什么元素需要那个类。 –

@SpencerWieczorek对不起，你是对的。我想添加一个类到''。 –

所以，在我看来这里有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>

希望这有助于！

来源

2016-09-19 17:55:29

jQuery add class not well well

回答

相关问题