在前端图像上传中搜索分类术语的JQuery数组以查找匹配的字词

时间：2016-04-26 作者：Malisa

我需要在4个不同的分类术语中搜索图像标记的匹配项。使用Jquery。

有数百张图片需要上传和标记，而我使用的主题后端有一个问题（每种帖子类型都有多个帖子），我使用版权exif标记为wordpress exif ImageMetadata添加了一个挂钩。

function hk_filter_add_exif($meta, $file, $sourceImageType)
{
    if ( is_callable(\'exif_read_data\') &&
        in_array($sourceImageType, apply_filters(\'wp_read_image_metadata_types\', array(IMAGETYPE_JPEG, IMAGETYPE_TIFF_II, IMAGETYPE_TIFF_MM)) ) )
    {
        $exif = @exif_read_data( $file );

        if (!empty($exif[\'Copyright\']))      $meta[\'tags\'] = $exif[\'Copyright\'] ;

        return $meta;
    }
}
和（短期）添加到功能wp\\U prepare\\u attachment\\u for\\u js in media。php

 $ptags = $meta[\'image_meta\'][\'tags\'];

 \'PWTags\'      => $ptags,
这使得在计算机上批量标记图像比在管理中一次标记一个图像容易得多。

例如，在版权EXIF标记中，我将childrens、white、pink和contempory放在一起。

卧室是房间，孩子们是特色，粉色是一种颜色，现代风格是一种风格。

每个都有一个分类法。

现在，当我从前端上传图像时，我在控制台中得到了以下内容。日志：

PWTags:"childrens,white,pink,contempory"
alt:""
author:"3"
authorName:"Gabpy"
caption:"bedroom"
title:"chpk2171134-3"
type:"image"
uploadedTo:0
uploading:false
url:"http://**************/wp-content/uploads/chpk2171134-3.jpg"
width:1600
PWTags：“childrens，white，pink，contempory”是此帮助请求的关键。我可以补充一点，对于每个分类法，标记的数量可以是多个，比如PWTags：“childrens，white，pink，contempory”，提供1个特性、2个颜色和一个样式。。

我需要在四个分类术语中搜索PWTags中每个单词的匹配项，如果找到，将其推到一起，然后插入下面的输入值中。

      jQuery.each( attachments,function(key,value){

        var full = value.sizes.full.url,
        imageID = value.id,
        thumbnail =  value.sizes.thumbnail.url,
        name = value.name,
        title = value.title,
        room_type = value.caption,
        pwTags = value.PWTags;


        holder += "<li class=\'gallery-thumb\'>" +
        "<div class=\'gallery-thumb-holder\'>" +
        "<a class=\'mark-featured\' data-property-id=\'0\' data-attachment-id=\'"+imageID+"\' href=\'#mark-featured\'><i class=\'fa fa fa-star-o\'></i></i></a>" +
        "<span class=\'my_delete1\' data-attachment-id=\'"+imageID+"\'><i class=\'fa fa-times-circle\'></i></span>" +
        "<img src=\'"+thumbnail+"\' exif=\'true\'/>" +
        "<input class=\'dt-image-name\' type=\'text\' name=\'items_name[]\' value=\'"+title+"\' />" +
        "</div>" +
        "<div class=\'input-holder\'>"+
        "<label>Tags</label><input class=\'dt-image-tags\' type=\'text\' name=\'items_tags[]\' value=\'"+pwTags+"\'/>" +
        "<label>Room Type</label><input class=\'dt-image-colors\' type=\'text\' name=\'items_image_room_group[]\' value=\'"+room_type+"\' />" +
        "<label>Colors</label><input class=\'dt-image-colors\' type=\'text\' name=\'items_image_colors[]\' value=\'"+colors+"\' />" +
        "<label>Features</label><input class=\'dt-image-colors\' type=\'text\' name=\'items_image_features[]\' value=\'"+features+"\' />" +
        "<label>Styles</label><input class=\'dt-image-colors\' type=\'text\' name=\'items_image_styles[]\' value=\'"+styles+"\' />" +
        "<input type=\'hidden\' name=\'items[]\' value=\'"+full+"\' />" +
        "<input type=\'hidden\' name=\'items_thumbnail[]\' value=\'"+thumbnail+"\' />" +
        "<input type=\'hidden\' name=\'items_id[]\' value=\'"+imageID+"\' />" +
        "</li>";
我已经创建了四个本地化变量，其中包含每个分类术语列表，例如：（不确定这是否是正确的方法，但我可以想到的唯一方法是通过Jquery搜索这些术语）

var imageColors = ["black","blue","brown","colourful","cream","green","grey","pink","red","white","yellow"];
var imageRooms = ["bathroom","bedroom","kitchen","outdoor-space","reception"];
var imageFeatures = ["childrens","feature-fireplace","feature-lighting","feature-staircase","great-view","home-office","hotel-chic","loft-living","open-plan","outdoor-living","small","statement-bath","statement-wallpaper","statement-wallpraper","swimming-pool"];
var imageStyles = ["contemporary","country","quirky","traditional"];
并且一直试图用pwtag搜索每个分类变量，但都没有用，JQuery中不是很逆向，这是一场斗争。希望这不会太令人困惑，一如既往，非常感谢您的帮助。

1 个回复
最合适的回答,由SO网友:Malisa 整理而成

回答自己的问题正在成为一种习惯：）

但在找到一个对我有用的解决方案后，希望这能帮助其他人。

首先定义upload函数中需要的三个变量：

      var features = "";
      var colors = "";
      var styles = "";
然后，添加以下内容以防止pwTags为空时出错：

     if (pwTags != null) {
       pwTags = pwTags;
     }else{
     pwTags = room_type;
     }
然后使用以下函数检查比较每个字符串是否匹配：

  function stringToCheck (arr1,arr2) {
    var common = new Array();
      for (var i = 0, n = arr1.length, j = 0, k = arr2.length; (i < n) && (j < k); i ++){
       if (arr1[i] == arr2[j]){
          common.push(arr1[i]);
          j ++;
        }
       else if (arr1[i] > arr2[j]){
          j ++;
          i --;
       }
    }
  return common.toString();
}
接下来调用将每个匹配的单词创建为字符串：

   var Tags = pwTags.split(",").sort();

    var roomGroupTerms = imageroom_group.split(",").sort();
    var roomGroup = stringToCheck(Tags,roomGroupTerms);

    var colorTerms = imagecolors.split(",").sort();
    var colors = stringToCheck(Tags,colorTerms);

    var featuresTerms = imagefeatures.split(",").sort();
    var features = stringToCheck(Tags,featuresTerms);

    var styleTerms = imagestyles.split(",").sort();
    var styles = stringToCheck(Tags,styleTerms);
最后，在jQuery plupload函数中，在每次图像上载时返回以下内容：

  holder += "<li class=\'gallery-thumb\'>" +
        "<div class=\'gallery-thumb-holder\'>" +
        "<a class=\'mark-featured\' data-property-id=\'0\' data-attachment-id=\'"+imageID+"\' href=\'#mark-featured\'><i class=\'fa fa fa-star-o\'></i></i></a>" +
        "<span class=\'deleteAttachment\' data-attachment-id=\'"+imageID+"\'><i class=\'fa fa-times-circle\'></i></span>" +
        "<img src=\'"+thumbnail+"\' exif=\'true\'/>" +
        "<input class=\'dt-image-name\' type=\'text\' name=\'items_name[]\' value=\'"+title+"\' />" +
        "</div>" +
        "<div class=\'input-holder\'>"+
        "<label>Tags</label><input class=\'dt-image-tags\' type=\'text\' name=\'items_tags[]\' value=\'"+pwTags+"\'/>" +
        "<label>Room Type</label><input class=\'dt-image-colors\' type=\'text\' name=\'items_image_room_group[]\' value=\'"+room_type+"\' />" +
        "<label>Colors</label><input class=\'dt-image-colors\' type=\'text\' name=\'items_image_colors[]\' value=\'"+colors+"\' />" +
        "<label>Features</label><input class=\'dt-image-colors\' type=\'text\' name=\'items_image_features[]\' value=\'"+features+"\' />" +
        "<label>Styles</label><input class=\'dt-image-colors\' type=\'text\' name=\'items_image_styles[]\' value=\'"+styles+"\' />" +
        "<input type=\'hidden\' name=\'items[]\' value=\'"+full+"\' />" +
        "<input type=\'hidden\' name=\'items_thumbnail[]\' value=\'"+thumbnail+"\' />" +
        "<input type=\'hidden\' name=\'items_id[]\' value=\'"+imageID+"\' />" +
        "</li>";
为了让PHP为每个分类法创建jQuery字符串，首先在主题页脚中放置以下内容：

if( is_page_template(\'tpl-dashboard-admin.php\')):
  echo "\\n<script type=\'text/javascript\'>\\n";
  echo "/* <![CDATA[ */\\n";;
  echo pw_get_taxonomies_for_attachments();
  echo "/* ]]> */\\n";
  echo " </script>\\n";
endif;
以及功能本身：

  function pw_get_taxonomies_for_attachments( $output = \'names\') {
    $taxonomies = array();
    $out=\'\';
    $termsOut=\'\';
      foreach ( get_taxonomies( array(), \'objects\' ) as $taxonomy ) {
         foreach ( $taxonomy->object_type as $object_type ) {
           if ( \'attachment\' == $object_type || 0 === strpos( $object_type, \'attachment:\' ) ) {
              if ( \'names\' == $output ){
                 $image_terms = get_terms( $taxonomy->name, array(\'hide_empty\' => false,) );
                   if ( ! empty( $image_terms ) && ! is_wp_error( $image_terms ) ){
                      $out .= \'var image\'.$taxonomy->name.\' = "\';
                      $image_terms = array_values($image_terms);
                        for($cat_count=0; 
                         $cat_count<count($image_terms); $cat_count++) {
                          $out .= $image_terms[$cat_count]->slug;
                           if ($cat_count<count($image_terms)-1){
                              $out .= \',\';
                           }
                         }
                        }
                           $out .= \'"\'."\\n";
                   }else{
                     $taxonomies[ $taxonomy->name ] = $taxonomy;
                    break;
              }
           }
         }
      }

    return $out;
  }
希望它能帮助别人

标签： custom-taxonomy   jquery   plupload   小码农  

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上，我不知道我是如何产生它的，或者它是否是正常的。我正在开发自己的插件，当一个足球队/足球队被输入到一个框中时，它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">