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

Question

我尝试捕获按钮ID并将其传递给将其与具有相同值的div相关联的函数。我想动态地让jquery改变那个div上的css。

一切正常（我可以动态创建div ID并显示它，但它不会将背景变为黄色。）从长远来看，我想拥有＆＃34; display：none＆＃34;当您单击提供的按钮时出现。

这是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. 您在您的codepen中未使用 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";
}