получение значения атрибута HTML

Question

У меня есть изображение с лупой. Когда я click на лупу, я хочу открыть модальное окно с большим изображением. Вот мой HTML:

<div class="col-sm-2 col-sm-offset-1"> 
    <div class="carousel-caption"><p>Fontana dei Cappuccini</p></div> 
    <a href="#x" class="thumbnail"><img id="cappuccini" class="photoThumbnail" src="../img/fontane/FontanaDeiCappuccini.jpg" alt="Fontana dei Cappuccini" style="cursor:pointer" title="FontanaDeiCappuccini"></a> 
    <img class="magnifier" id="cappuccini-mgf" src="../icons/lenteIngrandimento.png" alt="mgf" style="cursor:pointer"> 
</div> 

<div id="imgModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Titolo del modal uguale ad alt dell'immagine</h4> 
      </div> 
      <div class="modal-body" id="imgLarge"> 
      </div> 
      <div class="modal-footer"> 
      <p>Photo by me</p> 
      </div> 
     </div> 
    </div> 
</div> 

и мой Jquery:

$(".magnifier").click(function(){ 
    var mgf_id_value = this.id.slice(0,-4); 
    console.log(mgf_id_value); 
    var mod_img = $(".photoThumbnail[id=mgf_id_value]"); 
    console.log(mod_img); 
    var mod_img_alt = $(mod_img).attr("alt"); 
    console.log(mod_img_alt); 
$('#imgModal').modal('show'); 
}); 

var mod_img = $(".photoThumbnail[id=mgf_id_value]"); не работает. Если я использую заданное значение id (например, cappuccini), он работает, но если я попытаюсь использовать var mgf_id_value, результат не будет определен. Я не понимаю, где я ошибаюсь.

Заранее спасибо. M.Z.

Answer 1

Когда вы делаете var mod_img = $(".photoThumbnail[id=mgf_id_value]");, переменная mgf_id_value интерпретируется как сама переменная строка (она буквально использует строковое значение «mgf_id_value»), потому что ее внутренние кавычки. Попробуйте

var mod_img = $(".photoThumbnail[id="+mgf_id_value+"]");

Answer 2

селекторы в JQuery идентичны с теми, УСС.

так что если вы хотите, чтобы захватить изображение (тег «IMG») с и идентификатором «mgf_id_value» и класс «photoThumbnail»

напишет

var mod img = $("img#" + mgf_id_value + ".photoThumbnail")

Answer 3

Вы могли бы использовать это селектор:

var mod_img = $("#" + mgf_id_value + ".photoThumbnail"); 

Но лучше не искать весь DOM снова:

var mod_img = $(this).parent().find('.photoThumbnail')