小编SMa*_*yen的帖子

我正在尝试使用下面概述的技术将元素从灰度转换为颜色:

CSS

  .technical .tech-icon {
      width: 33px;
      height: 32px;
      display: inline-block;
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE6-9 */
      -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */

      -webkit-transition: all 0.5s ease-out;  /* Safari 3.2+, Chrome */
         -moz-transition: all 0.5s ease-out;  /* Firefox 4-15 */
           -o-transition: all 0.5s ease-out;  /* Opera 10.5–12.00 */
              transition: all 0.5s ease-out;  /* Firefox 16+, Opera 12.50+ */
      }

对于firefox,我们有filters.svg

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 …

比方说,例如,我想要一个项目列表,每个项目的每个项目都有不同的颜色项目符号点.

踢球者是我需要相对语义和自动地做到这一点,避免用户必须添加一个类或一段HTML,同时保持文本的颜色为黑色.

一个例子:

• 列出具有红色子弹的项目
• 列出具有蓝色子弹的项目
• 列出带有绿色子弹的项目
• 等等

它提出了一个有趣的问题 - 如何做到这一点,以便用户可以简单地添加项目列表,我的代码相应地更新它们.

我在变量中有以下内容, |MyString|

我想剥离领先|和结束|回归MyString

这样做最快,最不强烈的方法是什么？

我想学习jQuery的最佳实践,以及如何避免代码重复和使用优雅的代码.

我写过:

<script type="text/javascript">
  // Change the category name with the filter
  $(function() {

    // Featured
    $('.featured').click(function() {
      $('.categoryTitle h1').hide().html('Featured').fadeIn('slow');
    });
    // Web
    $('.web').click(function() {
      $('.categoryTitle h1').hide().html('Web').fadeIn('slow');
    });
    // Brand
    $('.brand').click(function() {
      $('.categoryTitle h1').hide().html('Brand').fadeIn('slow');
    });
    // Print
    $('.print').click(function() {
      $('.categoryTitle h1').hide().html('Print').fadeIn('slow');
    });
    // All
    $('.all').click(function() {
      $('.categoryTitle h1').hide().html('All').fadeIn('slow');
    });
  });
</script>

HTML

<ul id="filters">
    <li><a class="featured" href="#" data-filter=".feature-this">Featured</a></li>
    <li><a class="web" href="#" data-filter=".category-web">Web</a></li>
    <li><a class="brand" href="#" data-filter=".category-brand">Brand</a></li>
    <li><a class="print" href="#" data-filter=".category-print">Print</a></li>
    <li><a class="all" href="#" data-filter="*">Show All</a></li>
</ul>

<div class="categoryTitle"> <h1>Featured</h1> </div> …

我试图在右下角创建一个带透明蒙版的矩形按钮,按照这个小提琴:

http://jsfiddle.net/c6gUX/

body {
background: #fff;
padding: 5em;
}
.button {
    color: #FFFFFF;
    font-family: 'RalewayRegular', Arial,sans-serif;
    font-size: 1em;
    padding: 0.5em 1.2em 0.5em 0.8em;
    position: relative;
    text-decoration: none;
}
.button:hover {
    background: linear-gradient(to bottom, #FFA13E 0px, #E56204 100%) repeat scroll 0 0 transparent;
    color: #FFFFFF;
}
.button:after {
    background: url(http://i.imgur.com/8Vvw1Sw.png) no-repeat scroll 0 0 transparent;
    bottom: -12px;
    content: " ";
    height: 38px;
    position: absolute;
    right: -12px;
    width: 36px;
    z-index: 99;
}
.orange-grad {
    background: #ffa13e; /* Old browsers */
    /* IE9 …

<script type="text/javascript">
$(function() {

    $('.thelink a').select(function() {

        var a_href = $(this).attr("href");

    });
    $('.calltoActionMoreInformation a').attr('href', a_href);
});
</script>

  <div class="thelink" style="height: 250px; position: relative;">
  <a title="xxx" href="xxx">
    <img alt="tree" src="x" />

  </a>
  </div>

试图将href从内部放入:

  <span class="calltoActionMoreInformation" style="position: absolute; bottom: 0px;">
   <a title="" href="--Link here--"></a>
  </span>

如果我设置var a_href ='http://www.google.co.uk'; 它设置正确,所以问题在于获取.thelink div中唯一链接的href.

如何将.thelink a中的href分配给.calltoActionMoreInformation ？