基于阵列的数量显示的div [英] Show divs based on the amount of arrays
本文介绍了基于阵列的数量显示的div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是我的功能
函数yyy_hero_image_option_callback（）{
$ hero_options = get_option（'hero_options'）;
$数= COUNT（$ hero_options）;
$ totalimg = $计数4;
$的HTML ='＆LT; DIV ID =upload_yyy_sets＆GT;';
为（$ i = 1; $ I＆LT; = $ totalimg; $ I ++）{
如果（使用isset（$ hero_options ['upload_yyy_link_1']）及＆放大器; $ hero_options ['upload_yyy_link_1']）{
$的HTML ='＆LT; DIV ID =yyyclonedInput'。$我。'级=yyyclonedInput＆GT;';
$的HTML ='＆LT;输入ID =cs_product_menu_yyy_src _'。$ I'类型=文字大小=36NAME =hero_options [upload_yyy_link _'。$ I']值='$ hero_options ['_ upload_yyy_link'$ I'']。/＆GT; ＆LT;输入ID =_ cs_product_menu_yyy_src'$我.'_ yyybutton。TYPE =按钮值=添加/更改级=按钮二次YYY上传按钮/＆GT; ＆LT; DIV CLASS =按钮yyyremove＆GT; - ＆LT; / DIV＆GT;';
$ HTML ='＆LT; / DIV＆GT;';
}
}
$ HTML ='＆LT; / DIV＆GT;'; 回声$ HTML;
？＆GT; ＆LT; DIV CLASS =按钮yyyclone＆gt;添加图像＆LT; / DIV＆GT; ＆LT; PHP
}
随着一点jquery的，此计算出的量阵列，由4删除的号码，然后显示基于所得数目的div的量。这已经工作正常，但现在我已经增加了一个幻灯片，它需要以不同的拟定。
现在这里是我的新功能
函数yyy_hero_image_option_callback（）{
$ hero_options = get_option（'hero_options'）;
的foreach（$ hero_options为$关键=＆GT; $值）{
如果（strpos（$键，YYY））{
后续代码var_dump（$值）;
}
}
}
此新功能只发现有字符YYY其中的数组。
我怎么能算阵列的数量，然后像以前一样显示出来？
感谢
更新：这是什么我试图显示图像
每一个具有价值ZZZ阵列，我希望它显示的箱子，数量，这一形象将展示3盒，这意味着有3阵列，ZZZ在其中。
下面的阵列
阵列（9）{
[show_hero_options] =＆GT;串（1）为1
[hero_height] =＆GT;串（5）600px的
[hero_width] =＆GT;串（4）100％
[hero_buttons] =＆GT;串（4）秀
[upload_zzz_link_1] =＆GT;串（105）http://www.blahblah.com/image_link.jpg
[upload_zzz_link_2] =＆GT;串（79）http://www.blahblah.com/image_link.jpg
[upload_zzz_link_3] =＆GT;串（79）http://www.blahblah.com/image_link.jpg
[upload_yyy_link_1] =＆GT;串（79）http://www.blahblah.com/image_link.jpg}
更新2A：
下面的查询只是柜面
的jQuery（文件）。就绪（函数（$）{
//英雄形象ZZZ上传
功能zzz_updateClonedInput（索引，元，参数）{
$（元件）.appendTo（＃upload_zzz_sets）ATTR（ID，zzzclonedInput+指数）。
$（元素）.find（＆GT;：第一胎）ATTR（ID，cs_product_menu_zzz_src_+指数）。
$（元素）.find（＆GT;：第一胎）。ATTR（名，hero_options [upload_zzz_link_+指数+]）;
如果（参数）
$（元素）.find（＆GT;：第一胎）ATTR（价值，）;
$（元素）.find（＆GT;：第一胎）next（）的ATTR（ID，cs_product_menu_zzz_src_+指数+_zzzbutton）;。
}$（文件）。在（点击，.zzzclone功能（E）{
亦即preventDefault（）;
VAR zzztoappend ='＆LT; DIV ID =zzzclonedInput1级=zzzclonedInput＆GT;＆LT;输入ID =cs_product_menu_zzz_src_1类型=文字大小=36NAME =hero_options [upload_zzz_link_1]VALUE =/ ＆GT;＆LT;输入ID =cs_product_menu_zzz_src_1_zzzbutton类型=按钮值=添加/更改级=按钮二次ZZZ上传按钮/＆GT;＆LT; DIV CLASS =按钮zzzremove＆GT; - ＆LT ; / DIV＆GT;'
如果（$（zzzclonedInput。）长度酰胺。1）{
//创建DIV
$（'＃upload_zzz_sets'）追加（zzztoappend）。
}
其他{
//克隆DIV
VAR zzzcloneIndex = $（。zzzclonedInput），长度+ 1。
VAR zzznew_Input = $（本）.closest（'。zzzclonedInput'）。长？ $（本）.closest（'。zzzclonedInput'）的clone（）：$（zzzclonedInput：最后一次。）的clone（）;
zzz_updateClonedInput（zzzcloneIndex，zzznew_Input，真正的）;
}
}）;$（文件）。在（点击，.zzzremove功能（E）{
亦即preventDefault（）;
$（本）。家长（zzzclonedInput），删除（）;
$（。zzzclonedInput）。每个（函数（zzzcloneIndex，zzzclonedElement）{
zzz_updateClonedInput（zzzcloneIndex + 1，zzzclonedElement，FALSE）;
}）
}）;jQuery的（文件）。就绪（函数（$）{
$（文件）。在（点击，.zzz上传按钮功能（E）{
亦即preventDefault（）;
upload_image（$（本））;
返回false;
}）;
}）;功能upload_image（EL）{
变量$ = jQuery的;
VAR custom_uploader;
VAR键= $（EL）;
。VAR ID = button.attr（'身份证'）取代（'_ zzzbutton'，''）;
如果（custom_uploader）{
custom_uploader.open（）;
返回;
}
//扩展wp.media对象
custom_uploader = wp.media.frames.file_frame = wp.media（{
标题：添加图片，
按钮：{文字：'添加图像'}，
多：假的
}）;
//当选择一个文件，抓取URL并将其设置为文本字段的值
custom_uploader.on（'选择'，函数（）{
。附件= custom_uploader.state（）得到（'选择'）第（）的toJSON（）。
$（'＃'+ id）的.VAL（attachment.url）;
$（'＃'+ id）的preV（）ATTR（'src'中，attachment.url）。
//console.log(attachment）;
的console.log（ID）;
//custom_uploader.close（）;
}）;
//打开上传对话框
custom_uploader.open（）;
}}）;
更新2B：
我也设法显示领域适量，它只是不添加值。这是我的新的code
函数tl_hero_image_option_callback（）{
$ hero_options = get_option（'hero_options'）;
的foreach（$ hero_options为$关键=＆GT; $值）{
如果（strpos（$键，'_zzz_'））{
$的HTML ='＆LT; DIV ID =upload_zzz_sets＆GT;'; 如果（使用isset（$ hero_options ['upload_zzz_link_1']）及＆放大器; $ hero_options ['upload_zzz_link_1']）{
$的HTML ='＆LT; DIV ID =zzzclonedInput'。'级=zzzclonedInput＆GT $我。;;
$的HTML ='＆LT;输入ID =cs_product_menu_zzz_src _'。$ I'类型=文字大小=36NAME =hero_options [upload_zzz_link _'。$ I']值='$ hero_options ['_ upload_zzz_link'$ I'']。/＆GT; ＆LT;输入ID =_ cs_product_menu_zzz_src'$我.'_ zzzbutton。TYPE =按钮值=添加/更改级=按钮二次ZZZ上传按钮/＆GT; ＆LT; DIV CLASS =按钮zzzremove＆GT; - ＆LT; / DIV＆GT;';
$ HTML ='＆LT; / DIV＆GT;';
} $ HTML ='＆LT; / DIV＆GT;'; 回声$ HTML;
}}
}
解决方案
尝试：
函数yyy_hero_image_option_callback（）{ $ hero_options = get_option（'hero_options'）;
$ I = 1;
$的HTML ='＆LT; DIV ID =upload_zzz_sets＆GT;'; 的foreach（$ hero_options为$关键=＆GT; $值）{
如果（strpos（$键，ZZZ））{
$的HTML ='＆LT; DIV ID =zzzclonedInput'。'级=zzzclonedInput＆GT $我。;;
$的HTML ='＆LT;输入ID =cs_product_menu_zzz_src _'。$ I'类型=文字大小=36NAME =hero_options [upload_zzz_link _'。$ I']值='$值'。/＆GT; ＆LT;输入ID =_ cs_product_menu_zzz_src'$我.'_ zzzbutton。TYPE =按钮值=添加/更改级=按钮二次ZZZ上传按钮/＆GT; ＆LT; DIV CLASS =按钮zzzremove＆GT; - ＆LT; / DIV＆GT;';
$ HTML ='＆LT; / DIV＆GT;';
$ I ++; }
} $ HTML ='＆LT; / DIV＆GT;＆LT; DIV CLASS =按钮zzzclone＆gt;添加图像＆LT; / DIV＆GT;'; 回声$ HTML;
}
Here is my function
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
}
Along with a little jquery, this worked out the amount of arrays, deleted the number by 4 and then displayed the amount of divs based on the resulting number. This has been working fine but now i've added another slideshow and it needs to be worked out differently.
Now here is my new function
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);
}
}
}
This new function just find the arrays that have the characters yyy in them.
How can I count the amount of arrays and then display them like before?
Thanks
UPDATE: Here's an image of what i'm trying to display
for every array that has the value zzz, i want it to display that amount of boxes, this image will show 3 boxes, that means there are 3 arrays with zzz in them.
Here's the array
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"
}
UPDATE 2a:
Here's the query just incase
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();
}
});
UPDATE 2b:
I've also managed to display the right amount of fields, it just doesn't add the value. Here's my new code
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;
}
}
}
解决方案
try:
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;
}
这篇关于基于阵列的数量显示的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
