这是我的功能
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 的数组。
如何计算数组的数量,然后像以前一样显示它们?
Thanks
更新:这是我想要显示的图像
对于每个具有值 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:
我还设法显示了适量的字段,但它只是没有增加价值。这是我的新代码
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;
}
}
}