如何从标签列表到JavaScript变量获取对象属性？

Question

So I have this list of people :

#{list celibs}
        <li class="listCelibs">
            #{encart.moreInfoProfileSwitch
            index:_,
            owner:_,
            index:_.id,
            lang:'fr',
            mainPhoto:_.getProfileImage(),
            dateVision:_.getDateVision(),
            age:_.getAge(),
            taggedById:userSession,
            fadeToggleId:'more_info_user_' + _.id /}

            <a href="#more_info_user_${_.id}" class="ubeLightBox"><img width="263px" height="215px" src="${_.getProfileImage()}"></a>
            <p class="name">${_.nickName} <span>${_.getAge()} &{'rdv.rdvProposition.profile.age_' + _.mySex.keyName}</span></p>
            <a href="#more_info_user_${_.id}" class="ubeLightBox link1">&{'rdv.rdvProposition.profile.discover_' + sex}</a>

            <p class="askInterest">Intéressé ?</p>
            <button id="No">NON</button>
            <button id="Yes">OUI</button>
        </li>

    #{/list}

They are shown one by one and I would like to make an ajax request each time "No" or "Yes" are clicked.

$("#Yes, #No").click(function(){
    $.ajax({
    url: 'addLike',
    data: {
           id : '${_.id}'
           }
    });
}); 

The problem is that I only get the last id of the list. And it never changes. I would like to have the id of the current person on the screen in order to send it to the ajax request.

Answer 1

Try this, change id of Yes / No button to class and put input hidden with value= 'person id'.

#{list celibs}
        <li class="listCelibs">
            #{encart.moreInfoProfileSwitch
            index:_,
            owner:_,
            index:_.id,
            lang:'fr',
            mainPhoto:_.getProfileImage(),
            dateVision:_.getDateVision(),
            age:_.getAge(),
            taggedById:userSession,
            fadeToggleId:'more_info_user_' + _.id /}

            <a href="#more_info_user_${_.id}" class="ubeLightBox"><img width="263px" height="215px" src="${_.getProfileImage()}"></a>
            <p class="name">${_.nickName} <span>${_.getAge()} &{'rdv.rdvProposition.profile.age_' + _.mySex.keyName}</span></p>
            <a href="#more_info_user_${_.id}" class="ubeLightBox link1">&{'rdv.rdvProposition.profile.discover_' + sex}</a>

            <p class="askInterest">Intéressé ?</p>
            <button class="No">NON</button>
            <button class="Yes">OUI</button>
            // put hidden input here
            <input type="hidden" class="personId" value="${_.id}">

        </li>

    #{/list}

jQuery : use below query to call ajax on click of Yes / No button

$(".Yes, .No").click(function(){
    $.ajax({
    url: 'addLike',
    data: {
           id : $(this).next('.personId').val();
           }
    });
});