Почему Cant Jquery выбирает изображение с помощью Id без имени при доступе к атрибуту?

Question

У меня есть следующий код:

function myfun(arg) { 
 
    var info = $(arg).attr("myinfo"); 
 
    $('#output').html((typeof info) + ": " + info); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="A" myinfo="kittens" src="https://placekitten.com/200/200"> 
 
<img id="B" name myinfo="kittens" src="https://placekitten.com/200/200"> 
 
<ul> 
 
    <li> 
 
    <button onclick="myfun(A)">Doesn't Work</button> 
 
    </li> 
 
    <li> 
 
    <button onclick="myfun(B)">Works</button> 
 
    </li> 
 
</ul> 
 
<p id="output">Output here</p>

Когда я пытаюсь получить доступ к атрибуту myinfo в образе Id A, я не могу выбрать изображение Id для доступа myinfo с помощью JQuery.

Однако, если свойство name присутствует, тогда я легко могу выбрать myinfo с использованием того же синтаксиса. Не имеет значения, укажу ли я конкретное имя, даже работает пустой.

Что здесь происходит? Я попытался получить доступ с помощью $("#" + arg).attr("myinfo");, и это тоже не сработало.

Вот ссылка на JSFiddle также: JSFiddle Link

Answer 1

Вы должны поставить кавычки вокруг 'A' и 'B' в вызовах функций, а также использовать '#'+arg в качестве селектора.

function myfun(arg) { 
 
\t var info = $('#'+arg).attr("myinfo"); 
 
    $('#output').html((typeof info)+": "+info + ' ' + arg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="A" myinfo="kittens" src="https://placekitten.com/200/200"> 
 
<img id="B" name myinfo="kittens" src="https://placekitten.com/200/200"> 
 
<ul> 
 
<li><button onclick="myfun('A')">Doesn't Work</button></li> 
 
<li><button onclick="myfun('B')">Works</button></li> 
 
</ul> 
 
<p id="output">Output here</p>

В @Rory McCrossan и @Barmar упоминали в комментарии, это также может быть достигнуто путем доступа к элементам в качестве свойств объекта окна с window[arg].

function myfun(arg) { 
 
    var info = $(window[arg]).attr("myinfo"); 
 
    $('#output').html((typeof info)+": "+info + ' ' + arg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="A" myinfo="kittens" src="https://placekitten.com/200/200"> 
 
<img id="B" name myinfo="kittens" src="https://placekitten.com/200/200"> 
 
<ul> 
 
<li><button onclick="myfun('A')">Doesn't Work</button></li> 
 
<li><button onclick="myfun('B')">Works</button></li> 
 
</ul> 
 
<p id="output">Output here</p>