Question

我在php中有一个循环，我正在使用js函数onclick来从php循环中获取ID。我确实在js中循环以识别php动态ID，但是它识别出循环项的错误顺序。

示例php代码：

$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>";
}

示例js代码：

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;
            });
        }
    }
}

我在做什么错了？

Answer 1

在查看了其他与获取ID有关的问题后，我找到了答案。使用按钮类调用click函数后，我将其存储为变量并添加了此变量。

    $(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;
                });
            }
        }
});

然后在php中进行一些更改

$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>";
}

我希望这会对搜索此类解决方案的人有所帮助

js中的php ID识别

1 个答案: