setAttribute 不适用于 JQuery答案

【问题标题】：setAttribute not working with JQuerysetAttribute 不适用于 JQuery
【发布时间】：2015-08-07 06:31:23
【问题描述】：

我正在尝试让这段代码正常工作：

HTML：

<li><a class="main-but" href="#" id="click-no-po" onclick="porch_off('main-cpo');activeSelectPorOff();" >No Porch</a></li>

脚本：

function activeSelectPorOff() {
    document.getElementById('click-no-po').setAttribute('class', 'main-but active');
    document.getElementById('click-cpo').setAttribute('class', 'main-but');
}

potch_off 函数运行良好，但我似乎无法设置属性。

我不是最精通 jQuery 和 JavaScript，但我正在尝试。

【问题讨论】：

控制台错误？这是您应该首先查看的位置。
这里的任何地方都涉及到 jQuery 吗？我没看到。 porch_off 工作正常吗？
有点骗人？ stackoverflow.com/questions/6860213/…
不要将setAttribute 用于课程。而是设置.className 属性，例如document.getElementById('click-no-po').className = 'main-but active'
试试 -- document.getElementById('click-no-po').classList.add("the-class"); ----- callmenick.com/post/…

标签： javascript jquery html

【解决方案1】：

使用它来添加类：

$("#click-no-po").addClass('main-but active');

或者这样删除类：

$("#click-no-po").removeClass('main-but active');

别忘了使用ready函数确保js代码找到ID。

【讨论】：

谢谢。这行得通，但几秒钟后，“活动”类在 Chrome 的代码视图中消失了。有什么原因吗？

【解决方案2】：

尝试切换类

$('a.main-but').on('click',function(e){
  e.preventDefault();
  $(this).toggleClass("active");
});

.active{background:red;display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="main-but" href="#">No Porch</a>

【讨论】：

【解决方案3】：

如果您尝试使用 jquery toggleClass，请尝试这样的操作

function activeSelectPorOff() {
    $('click-po').toggleClass('main-but');
}

【讨论】：

【解决方案4】：

首先，我在你的测试代码中，只有元素 'a' 上带有 id，所以在你的函数中

    function activeSelectPorOff() {
        document.getElementById('click-no-po').setAttribute('class', 'main-but active');
        document.getElementById('click-cpo').setAttribute('class', 'main-but');
    }

document.getElementById('click-cpo') 返回一个 null 元素，当您尝试使用 .setAttribute() 读取/写入时，您可以读取 null 的属性

    function activeSelectPorOff() {
        var a=document.getElementById('click-no-po');
        var b=document.getElementById('click-cpo').setAttribute('class', 'main-but');
        try{
          a.setAttribute('class', 'main-but active');
        }catch(e){
          console.log(e)
        }
        try{
          b.try{a.setAttribute('class', 'main-but active');
        }catch(e){
          console.log(e)
        }
    }

这应该避免函数停止，另一种方法是在尝试设置属性之前检查 a!=null

【讨论】：

避免try...catch。使用if(a) a.setAttribute(...)。