jQuery изменение фона с id - PullRequest
Новая
       54

jQuery изменение фона с id

0 голосов
/ 20 июня 2020

здесь thisid хранит идентификатор элемента html. и я хочу изменить цвет фона, используя следующий код 

let thisid = 'test';
$("a#" + thisid).css("background-color", "yellow");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="test" href="#">Hello world!</a><br/>
<a id="test2" href="#">Goodbye all</a>

это не работает, но работает, если я удалю thisid и напишу его следующим образом 

 $("a").css("background-color","yellow");

, но он выбирает все с помощью tag

ниже - это то, что я на самом деле хочу сделать. 

$(document).ready(function() {
        // hide all questions
        $("h1").hide();
        // display first question
        $("h1#1").show();
        // show selected question
        $("a").bind('click',function(){

            let thisid = $(this).attr('id');

            $("h1").hide();
            $("h1#"+thisid).show();
            $("a#"+thisid).css("background-color","yellow");
        });

    });

1 Ответ

0 голосов
/ 20 июня 2020

Аргумент функции jQuery ($()) обрабатывается как селектор CSS. Так как вы пытаетесь найти элемент по идентификатору, вам нужно запустить селектор с октеторпом (#). Начиная с символа выбирается по типу тега. Не имея под рукой html, я предполагаю, что настоящая проблема в том, что элемент с ID thisid не является тегом <a>. (Фактически вы выбираете «любой тег с идентификатором thisid», но поскольку идентификатор уникален, включая избыточный селектор типа тега)

Вы должны иметь возможность сделать что-то подобное: 

let thisid = "two"
$("#"+thisid).css("background-color","yellow");
thisid = "three"
// won't work, element with id `three` is not an 'a' tag
$("a#"+thisid).css("background-color","green"); 
thisid = "four"
$("div#"+thisid).css("background-color","blue");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<div id="four">four</div>
...