javascript - 获取 div ID，传递给变量，然后使用 jquery 取消隐藏该 div

Question

我试图捕获一个按钮 ID 并将其传递给一个函数，该函数将其与具有相同值的 div 关联起来。然后我想动态地让 jquery 更改该 div 上的 css。

一切正常(我可以动态创建 div ID 并显示它，但它不会将背景变成黄色。)从长远来看，我希望在您单击提供的按钮时出现“显示:无” 。

这是 HTML:

<div class="parent" id="level_0">Intro Level 
<br></br>
<input type="button" id="level_1a" value="Choice A"            onclick="set_path(this.id);"> 
<input type="button" id="level_1b" value="Choice B" onclick="set_path(this.id);">
<br></br>
    <div class="child" id="level_1az">This is Level 1 A
    </div>

    <div class="child" id="level_1bz">This is Level 1 B
    </div>
</div>

<div id="fill-in"></div>

这是 JS:

function set_path(clicked_id) {
   var divX = ('#' + clicked_id);
   var divID = "'"+divX+"'";
   document.getElementById('fill-in').innerHTML = divID;
   $(divID).css("background-color", "yellow");
};

您可以在此处查看代码:http://codepen.io/cunyj/pen/qdrYxe/

Answer 1

1. 您在代码笔中未使用jQuery 库`

2. 您的关卡 ID 有一个额外的 “z”，例如 level_1az，因此您可能需要:

Demo that uses jQuery

function set_path(clicked_id) {
   var divX = ('#' + clicked_id);
   $('fill-in').html( divX );
   $(divX+'z').css("background-color", "yellow"); // use that 'z'
}

Demo in pure JavaScript

function set_path(clicked_id) {
   var divX = clicked_id;
   document.getElementById('fill-in').innerHTML = divX;
   var level = document.getElementById(divX +'z'); // use that 'z'
   level.style.backgroundColor = "yellow";
}