javascript - 获取 HTML 属性值

Question

我有一张带有放大镜的图像。当我点击放大镜时，我想打开一个具有更大图像的模式窗口。这是我的 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+"]");