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值（例如＆＃39; cappuccini＆＃39;）它可以工作，但如果我尝试使用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中的选择器与css中的选择器相同。

因此，如果您想要使用和id＆＃39; mgf_id_value＆＃39;捕获图像（标记＆＃39; img＆＃39;）和照片的类别＆＃39;

你会写

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

Answer 3

您可以使用此选择器：

     (A1 ⊕ A1) ⊕ (A2 ⊕ A2) ⊕    ...   ⊕ B
 = 
         0      ⊕      0     ⊕    ...   ⊕ B
 = 
         B

但最好不要再搜索整个DOM：

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

获取HTML属性值

3 个答案: