Получение идентификатора div, переход к переменной, а затем удаление этого div с помощью jquery

Question

Я пытаюсь захватить идентификатор кнопки и передать ее функции, которая связывает ее с div, который имеет такое же значение. Я хочу, чтобы динамически с помощью jquery изменился css на этом div.

Все работает (я могу динамически создавать идентификатор div и показывать его, но желтый фон не будет). В конечном итоге я хочу иметь «display: none», которые появляются, когда вы нажимаете на предоставленную кнопок.

Вот 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 в вашем codepen`

2. Ваши идентификаторы уровня имеют дополнительный "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"; 
}