使用ACF为jQuery动画添加唯一ID或数字到id的结尾

时间:2013-10-03 19:22:15

标签: javascript jquery html css wordpress

我有一切都在html和jquery中工作,但我需要做的是分配并附加一个数字,以使唯一ID与Repeater字段一起工作。以下是我HTML CSSjquery时所拥有的内容。有没有办法在#expand中使用htmljQuery ID的末尾添加唯一号码(例如1或2 ...)?

以下是我们在这里帮助你们的代码:

    #expand-1 .bio-pic2, #expand-2 .bio-pic2 {
    position:absolute;
    top:0;
    left:0;
}
#expand-1, #expand-2 {
    position:absolute;
    width:1000px;
    border: 1px solid black;
    display: none;
    background-color:#ffffff;
    z-index:9999;
   height:323px;
}
.bio-pic2 img {
    position:absolute;
    top:0;
    left:0;
    width:323px;
}
.testimonial {
    position:absolute;
    top:333px;
    left:0;
    font-size:15px;
}
.desc {
    position:absolute;
    top:10px;
    left:333px;
}
.bio-pic {
    float:left;
    cursor: pointer;
    z-index:9998;
    margin:0 5px 0 0;
}
<div id="expand-1">
    <div class="test">
        <div class="bio-pic2">
            <img src="http://www.brent-ransom.com/photo-img.jpg" />
            <div class="bio-nt">
                    <h2>Name</h2>

                    <h3>Position</h3>

            </div>
        </div>
        <div class="testimonial">A testimonial!</div>
    </div>
    <div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-1" class="bio-pic">
    <img src="http://www.brent-ransom.com/photo-img.jpg" />
</div>
<div id="expand-2">
    <div class="test">
        <div class="bio-pic2">
            <img src="http://brent-ransom.com/photo2-img.jpg" />
            <div class="bio-nt">
                    <h2>Name</h2>

                    <h3>Position</h3>

            </div>
        </div>
        <div class="testimonial">A testimonial!</div>
    </div>
    <div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-2" class="bio-pic">
    <img src="http://brent-ransom.com/photo2-img.jpg" />
</div>
$(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand-"+$(this).attr("id").split("-")[1]);
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand-1, #expand-2").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
})

以下是jsfiddle http://jsfiddle.net/BrentRansom/h64CZ/4/

的链接

1 个答案:

答案 0 :(得分:0)

更改ID ...

var myNum = 3;
$('#expand').attr('id', 'expand' + myNum);