我有一张带有放大镜的图像。当我点击放大镜时,我想打开一个具有更大图像的模式窗口。这是我的 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">×</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.
最佳答案
当您执行 var mod_img = $(".photoThumbnail[id=mgf_id_value]");
时,mgf_id_value 变量被解释为变量字符串本身(也称为字面上使用字符串值“mgf_id_value”) ) 因为它的内部引号。尝试一下
var mod_img = $(".photoThumbnail[id="+mgf_id_value+"]");
关于javascript - 获取 HTML 属性值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41963931/