php - 根据数组的数量显示 div

Question

这是我的功能

function yyy_hero_image_option_callback() {
$hero_options = get_option( 'hero_options' ); 
$count=count($hero_options);
$totalimg=$count-4;
$html = '<div id="upload_yyy_sets">';
    for($i=1;$i<=$totalimg;$i++){ 
    if( isset( $hero_options['upload_yyy_link_1'] ) && $hero_options[ 'upload_yyy_link_1' ] ) { 
        $html .= '<div id="yyyclonedInput'.$i.'" class="yyyclonedInput">';
        $html .= '<input id="cs_product_menu_yyy_src_'.$i.'" type="text" size="36" name="hero_options[upload_yyy_link_'.$i.']" value="' . $hero_options['upload_yyy_link_'.$i.''] . '" /> <input id="cs_product_menu_yyy_src_'.$i.'_yyybutton" type="button" value="Add / Change" class="button-secondary yyy-upload-button"  /> <div class="button yyyremove">-</div>';
        $html .= '</div>';
    }
    }
    $html .= '</div>';

    echo $html;
    ?> <div class="button yyyclone">Add an Image</div> <?php 
}

结合一点 jquery，计算出数组的数量，将数字减去 4，然后根据结果数字显示 div 的数量。这一直运行良好，但现在我添加了另一个幻灯片，需要以不同的方式进行处理。

现在这是我的新功能

function yyy_hero_image_option_callback() {
    $hero_options = get_option( 'hero_options' ); 
    foreach($hero_options as $key => $value){
        if (strpos($key, 'yyy')) {
            var_dump($value);
        }
    }
}

这个新函数只查找其中包含字符 yyy 的数组。

如何计算数组的数量，然后像以前一样显示它们？

谢谢

更新:这是我要显示的图像

对于每个值为 zzz 的数组，我希望它显示该数量的方框，此图像将显示 3 个方框，这意味着有 3 个数组包含 zzz。

这是数组

array(9) { 
["show_hero_options"]=> string(1) "1" 
["hero_height"]=> string(5) "600px" 
["hero_width"]=> string(4) "100%" 
["hero_buttons"]=> string(4) "show" 
["upload_zzz_link_1"]=> string(105) "http://www.blahblah.com/image_link.jpg" 
["upload_zzz_link_2"]=> string(79) "http://www.blahblah.com/image_link.jpg" 
["upload_zzz_link_3"]=> string(79) "http://www.blahblah.com/image_link.jpg" 
["upload_yyy_link_1"]=> string(79) "http://www.blahblah.com/image_link.jpg" 

}

更新 2a:

这里是查询以防万一

jQuery(document).ready(function($){
// Hero Image zzz upload    
function zzz_updateClonedInput(index, element,param) {
    $(element).appendTo("#upload_zzz_sets").attr("id", "zzzclonedInput" +  index);
    $(element).find(">:first-child").attr("id", "cs_product_menu_zzz_src_" + index);
    $(element).find(">:first-child").attr("name", "hero_options[upload_zzz_link_" + index + "]");
    if(param)
    $(element).find(">:first-child").attr("value", "");
    $(element).find(">:first-child").next().attr("id", "cs_product_menu_zzz_src_" + index + "_zzzbutton");
}

$(document).on("click", ".zzzclone", function(e){
    e.preventDefault();
    var zzztoappend='<div id="zzzclonedInput1" class="zzzclonedInput"><input id="cs_product_menu_zzz_src_1" type="text" size="36" name="hero_options[upload_zzz_link_1]" value="" /><input id="cs_product_menu_zzz_src_1_zzzbutton" type="button" value="Add / Change" class="button-secondary zzz-upload-button" /><div class="button zzzremove">-</div>'
    if( $(".zzzclonedInput").length < 1){
        // create div
        $('#upload_zzz_sets').append(zzztoappend);
    }
    else {
        // clone div
        var zzzcloneIndex = $(".zzzclonedInput").length + 1;
        var zzznew_Input = $(this).closest('.zzzclonedInput').length ? $(this).closest('.zzzclonedInput').clone() : $(".zzzclonedInput:last").clone();
        zzz_updateClonedInput(zzzcloneIndex, zzznew_Input,true); 
    }   
});

$(document).on("click", ".zzzremove", function(e){
    e.preventDefault();
    $(this).parents(".zzzclonedInput").remove();
    $(".zzzclonedInput").each( function (zzzcloneIndex, zzzclonedElement) {
        zzz_updateClonedInput(zzzcloneIndex + 1, zzzclonedElement,false);
    })
});

jQuery(document).ready(function($){
    $(document).on("click", ".zzz-upload-button", function(e){
        e.preventDefault();
        upload_image($(this));
        return false; 
    });
});

function upload_image(el){
    var $ = jQuery;
    var custom_uploader;
    var button = $(el);
    var id = button.attr('id').replace('_zzzbutton', '');
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }
    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Add Image',
        button: { text: 'Add Image' },
        multiple: false
    });
    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        $('#'+id).val(attachment.url);
        $('#'+id).prev().attr('src', attachment.url);
        //console.log(attachment);
        console.log(id);
        //custom_uploader.close();
    });
    //Open the uploader dialog
    custom_uploader.open();
}

}); 

更新 2b:

我还设法显示了正确数量的字段，只是没有增加值(value)。这是我的新代码

function tl_hero_image_option_callback() {
$hero_options = get_option( 'hero_options' ); 


foreach ($hero_options as $key => $value) {
if (strpos($key, '_zzz_')) {
    $html = '<div id="upload_zzz_sets">';

    if( isset( $hero_options['upload_zzz_link_1'] ) && $hero_options[ 'upload_zzz_link_1' ] ) { 
        $html .= '<div id="zzzclonedInput'.$i.'" class="zzzclonedInput">';
        $html .= '<input id="cs_product_menu_zzz_src_'.$i.'" type="text" size="36" name="hero_options[upload_zzz_link_'.$i.']" value="' . $hero_options['upload_zzz_link_'.$i.''] . '" /> <input id="cs_product_menu_zzz_src_'.$i.'_zzzbutton" type="button" value="Add / Change" class="button-secondary zzz-upload-button"  /> <div class="button zzzremove">-</div>';
        $html .= '</div>';
    }

    $html .= '</div>';

    echo $html;
}

} 


}

Answer 1

尝试:

function yyy_hero_image_option_callback() {

  $hero_options = get_option( 'hero_options' ); 
  $i=1;
  $html = '<div id="upload_zzz_sets">';

  foreach($hero_options as $key => $values){
    if (strpos($key, 'zzz')) { 
        $html .= '<div id="zzzclonedInput'.$i.'" class="zzzclonedInput">';
    $html .= '<input id="cs_product_menu_zzz_src_'.$i.'" type="text" size="36" name="hero_options[upload_zzz_link_'.$i.']" value="' . $values . '" /> <input id="cs_product_menu_zzz_src_'.$i.'_zzzbutton" type="button" value="Add / Change" class="button-secondary zzz-upload-button"  /> <div class="button zzzremove">-</div>';
    $html .= '</div>';
     $i++;

    }


  }

  $html .= '</div><div class="button zzzclone">Add an Image</div>';

  echo $html; 
}