Question

我正在为客户端网站开发javascript工具，基本上用户从下拉列表中选择一种颜色，然后客户端希望显示该颜色的图像。

但是有一个视图问题，客户端使用的系统无法向图像添加id或类，所以我不能做一个简单的，

if (select value = a class)
{
    showImage
}

到目前为止我必须做的是将图像颜色添加到图像的alt文本中，因此图像标题通常可能如下所示：

袜子，绿色

到目前为止，我有以下代码：

$('.information select#colours').change(function(){
    var colour = $(this).val();
});

在我的页面上可以有任意数量的产品图片，它们的标记将如下所示，

<div class="carousel js" tabindex="0">
<ul class="alternative_images" style="position: absolute; top: 0px; width: 60px; height: 276px;">
    <li>
        <a href="/uploaded/thumbnails/db_file_img_4_254x347.jpg">
            <img alt="Ben Fogle Sock, Grey" src="/uploaded/thumbnails/db_file_img_9_58x79.jpg">
        </a>
    </li>
    <li>
        <a href="/uploaded/thumbnails/db_file_img_4_254x347.jpg">
            <img alt="Ben Fogle Sock, Green" src="/uploaded/thumbnails/db_file_img_7_58x79.jpg">
        </a>
    </li>
    <li>
        <a href="/uploaded/thumbnails/db_file_img_4_254x347.jpg">
            <img alt="Ben Fogle Sock, Red" src="/uploaded/thumbnails/db_file_img_5_58x79.jpg">
        </a>
    </li>
</ul>

我的问题是

1）如何在逗号后整理图像中找到的图像的所有颜色？ 2）如何搜索这些颜色以拉回正确的图像？

有更好的方法吗？

Answer 1

搜索javascript中的任何字符串我认为你可以使用这个函数

在

在您的情况下搜索数组和对象中的字符串从字符串中定义数组你要搜索的内容如下所示

var colors = new Array("red", "black", "grey", "blue", "yellow");

搜索红色"red" in colors;，如果找不到seach，将返回true.false。

//你也可以使用对象。

var colors = {color1: "red", color2: "grey", color3: "black"};

使用

color1 in colors;//return true
match请参阅此https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/match
RegExp请参阅此https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp
in请参阅此内容 https://developer.mozilla.org/en/JavaScript/Reference/Operators/in

Answer 2

var color = "Red";

var els = $("img").filter(function() {
  return $(this).attr('alt').indexOf(", " + color) !== -1;
});

els现在将包含alt包含, Red的所有图片。

Answer 3

您可以使用＆＃39; * =＆＃39;属性选择器。这是一个例子：

function findAlternativeImageWithColor(color) {
  return $(".alternative_images img[alt*=', " + color + "']");
};

$images = findAlternativeImageWithColor("Green");


$images.each(function() {
    console.info(this);
})

更新 - 如果你发现自己这么做了很多，你可以添加一个自定义选择器表达式（帽子提示：dogbert为indexOf表达式）：

$.extend($.expr[':'], {
    color: function(el, i, m) {
        var color = m[3];
        return $(el).attr('alt').indexOf(", " + color) !== -1;
    }
});

然后用它来寻找替代颜色。

$(".alternative_images img:color(Green)")

Answer 4

有些人添加了工作答案，但我想如果你有足够的图像来按颜色过滤你也可能对性能感兴趣，这意味着选择所有的图像元素并解析他们的替代文字每次更改过滤器选项都不是最佳解决方案。

另一种方法是执行一次，仅在页面加载时提取颜色并将其作为CSS类添加到图像上。由于现代浏览器使用querySelectorAll优化类查找（并且jQuery尽可能使用此优化），然后您可以执行普通的旧类选择并期望良好的性能：

$(function() {
  var thisEl, thisAlt, lastCommaAt, thisColor;

  // select all of the images that have an `alt` attribute containing a comma
  $( '.alternative_images img[alt *= ","]' ).each( function() {
    thisEl  = $(this);
    thisAlt = thisEl.attr( 'alt' );

    // get the position of the last comma
    lastCommaAt = thisAlt.lastIndexOf( ',' );
    if( lastCommaAt > 0 ) {
      // get the part after the last comma and trim extra whitespace
      thisColor = $.trim( thisAlt.slice( lastCommaAt + 1 ) );

      // add the color as a CSS class
      thisEl.addClass( thisColor );
    }
  } );


  // later...

  $( '.information select#colours' ).change( function() {
    var selector     = '.alternative_images .' + $(this).val();
      , matchingImgs = $( selector )
    ;

    // do something with the matching images
    console.log( matchingImgs );
  });
});

（如果性能仍然问题，另一个选择是构建一个哈希表（使用JavaScript对象），例如var els = { "Red" : [ <img src...>, <img...>, ... ], "Blue" : [ <img...>, ...] }用于非常快速的查找，例如els[ "Blue" ]。）< / p>

在javascript中搜索字符串

4 个答案:

更新 - 如果你发现自己这么做了很多，你可以添加一个自定义选择器表达式（帽子提示：dogbert为indexOf表达式）：