Php id在js中识别

Question

I have a loop in php and I'm using a js function onclick to get the id from the php loop. I do loop in js to recognize a php dynamic id, but it recognizes the wrong order of the loop item.

Sample php code:

$list = 1;        
for ($i = 0; $i < 7; $i++ ){
    $listNo = $list;
    $list++;
    $html .= "<div class='row l'>";
    $html .= " <div class='col-xl-3 col-lg-8 col-6'>
            <input name=']' id='dm_slider_img_url_$listNo' type='text' value='" . $dm_slides[++$counter] . "'/>
            <button class='set_custom_images' id='meta-image-button-$listNo'>
                <span class='dashicons dashicons-plus-alt'></span>
            </button>
        </div>
        <div class='col-xl-1 col-lg-4 col-6 mr-auto'>
            <img id='dm_slider_img_preview_$listNo' src='" . $dm_slides[$counter++] . "' name=''>
        </div>";
    $html .= "</div>";
}

Sample js code:

var send_attachment_bkp = wp.media.editor.send.attachment;
for (let ids=1; ids<8; ids++) {
    if ($('#meta-image-button-'+ids).length > 0) {
        if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
            $(document).on('click', '.set_custom_images', function(e) {
                e.preventDefault();
                var button = $(this);
                var id = button.prev();
                wp.media.editor.send.attachment = function(props, attachment) {
                    $('#dm_slider_img_url_'+ids).val(attachment.url);
                    $('#dm_slider_img_preview_'+ids).attr('src',attachment.url);
                    wp.media.editor.send.attachment = send_attachment_bkp;
                };
                wp.media.editor.open(button);
                return false;
            });
        }
    }
}

What am I doing wrong?

Answer 1

After looking other questions related to getting id, I figured it out. After calling click function using button class, I stored it as variable and added this variable.

    $(document).ready(function() {
    var $ = jQuery;
    // var ids = 1;
    // $(«.set_custom_images»).onclick = function(t) {t.attr(«id»)}
    var send_attachment_bkp = wp.media.editor.send.attachment;
        if ($("[id^='meta-image-button-']" ).length > 0) {
            if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
                $(document).on('click', '.set_custom_images', function(e) {
                    var clickedID = this.id;
                    e.preventDefault();
                    var button = $(this);
                    var id = button.prev();
                    wp.media.editor.send.attachment = function(props, attachment) {
                            $('#dm_slider_img_url_'+clickedID).val(attachment.url);
                   $('#dm_slider_img_preview_'+clickedID).attr('src',attachment.url);
                            wp.media.editor.send.attachment = send_attachment_bkp;
                    };
                    wp.media.editor.open(button);
                    return false;
                });
            }
        }
});

And in php make some changes

$list = 1;        
for ($i = 0; $i < 7; $i++ ){
    $listNo = $list;
    $list++;
    $html .= "<div class='row l'>";
    $html .= " <div class='col-xl-3 col-lg-8 col-6'>
            <input name='' id='dm_slider_img_url_m_$listNo' type='text' value='" . $dm_slides[++$counter] . "'/>
            <button class='set_custom_images' id='m_$listNo'>
                <span class='dashicons dashicons-plus-alt'></span>
            </button>
        </div>
        <div class='col-xl-1 col-lg-4 col-6 mr-auto'>
            <img id='dm_slider_img_preview_m_$listNo' src='" . $dm_slides[$counter++] . "' name=''>
        </div>";
    $html .= "</div>";
}

I hope this will help for someone who searches solution like this