使用ACF将唯一的id或数字添加到jQuery动画的id末尾

Question

我已经在html和jquery中做了所有的工作，但是我需要做的是分配和附加一个数字，以使唯一的id与Repeater字段一起工作。这就是我在HTML CSS和jquery中拥有的东西。有没有一种方法可以附加一个唯一的数字(例如1或2...)到html中的#expand id的末尾，使用jQuery？

这是我在你们的帮助下得到的代码：

    #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/的链接。

Answer 1

要更改id...

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