从div中的Image获取Id属性

时间:2014-05-01 19:43:23

标签: javascript jquery

我有一个包含1到多个图像的div,包含下一个和上一个图像按钮。当用户单击下一个/上一个按钮时,使用jquery将当前图像样式从display:block更改为display:none。我需要从显示的当前图像中获取ID属性。已应用display:block样式。

<div id="propPhotos" name="propPhotos">
   <div id="propPhotsDivList">
        <div id="imageNameId0" style="display:block">
             <img src="/PropertyImages/1/171fc210b4584f41936a078c4176c7e0.jpg" height="200" width="200" id="3"/>
        </div>
        <div id="imageNameId1" style="display:none">
            <img src="/PropertyImages/1/114810f0067749eda8049d2f8269dd00.jpg" height="200" width="200" id="4"/>
        </div>
        <div id="imageNameId2" style="display:none">
            <img src="/PropertyImages/1/8.jpg" height="200" width="200" id="15"/>
        </div>
        <div id="imageNameId3" style="display:none">
            <img src="/PropertyImages/1/e8f182ab645549b399cebc67ed996d151.jpg" height="200" width="200" id="25"/>
        </div>
    </div>
    <div>
        <div class="row">
            <input type="button" id="NextImage" value="Next Image" onclick="ImageNext()" /><input type="button" id="PrevImage" value="Previous Image" onclick="    ImagePrev()" />
        </div>
        <div class="row">
            <button type="button" class="AddImage">Add Image</button><button type="button" class="RemoveImage">Remove This Image</button>
        </div>

    </div>

这是我目前在nextprevious图片点击处理程序中的路径。

        CurrentImageId = document.getElementById("imageNameId" + id).children('img').attr('id');

因此,当用户单击任一按钮时,它应该将id值分配给CurrentImageId。如果没有点击nextprevious图片按钮,这对于初始加载不起作用。

2 个答案:

答案 0 :(得分:1)

嗯,就初始负载而言,有几种不同的方法。以下是几个例子:

使用:visible选择器:

var currentImageId = $('#propPhotsDivList > div:visible > img').prop('id');

或者可能与filter()结合使用:

var currentImageId = $('#propPhotsDivList img').filter(function(){
    return $(this).parent('div').is(':visible');
}).prop('id');

如果使用您的点击处理程序隐藏div并显示相关内容,您也可以在其中使用相同的功能。

答案 1 :(得分:0)

$('#propPhotsDivList').children('div:not(:hidden)').attr('id');