Question

我一整天都在拖网试图解决这个问题，我确信这很简单，但如果我能搞清楚的话，我会很高兴。

我已经尝试过存档，似乎无法找到我特定问题的解决方案，因此非常感谢任何帮助！

我希望在单击列表项时为单个元素添加样式。列表项ID和关联的div类是在我的PHP代码中动态创建的。

使用我的脚本，我得到了一个警告框，作为测试显示附加到列表项的onclick事件返回正确的值。在这种情况下ID和类“1995”

但是当我使用

将正确返回的值添加到我的脚本中时

document.getElementsByClassName(supplyClass).style.display = "none";

在控制台中我得到了

“未捕获的ReferenceError：未定义reply_click”

下面是简短的代码，成功的警示线被注释掉了。

function reply_click(supplyClass) {
    //alert(supplyClass);
    document.getElementsByClassName(supplyClass).style.display = "none";
}

<div class="supply-container">
    <div class="supply-menu">
        <ul>
            <li id="1995" onClick="reply_click(this.id)">Desking Systems</li>
        </ul>
    <div>
    <div class="supply-content-container">
        <div class="1995 supply-content" >
                    <p>LorumIpsum</p>
        </div>
    </div>            
</div>

Answer 1

当您的事件处理程序正在传递已点击元素的id时，您需要使用document.getElementById来查找元素，并将显示设置为无，如下所示

＆＃13;

    function reply_click(supplyClass)
{
    alert(supplyClass);
    //document.getElementsByClassName(supplyClass).style.display = "none";
    document.getElementById(supplyClass).style.display = "none";
}

＆＃13;

<div class="supply-container">
    <div class="supply-menu">
        <ul>
            <li id="1995" onClick="reply_click(this.id)">Desking Systems</li>
        </ul>
    <div>
    <div class="supply-content-container">
        <div class="1995 supply-content" >
                    <p>LorumIpsum</p>
        </div>
    </div>            
</div>

＆＃13;

Answer 2

document.getElementsByClassName(supplyClass)会返回元素列表，因此您无法直接设置其样式。

如果你想为这种方式返回的所有元素设置样式，那么你就可以这样做。

const els = document.getElementsByClassName(someClass);

for (let i = 0; i < els.length; i++) {
  els[i].style.display = 'none';
}

Answer 3

感谢Felix＆amp; Sumeet有效的正确代码行如下。

document.querySelector('.supply-' + supplyClass).style.display = 'none';

我没有意识到你不能用一个整数来启动一个类名，所以用一个连字符将一个字附加到supplyClass值，它运行正常。

再次感谢。

Javascript使用onClick事件中的值向元素添加类

3 个答案: