javascript - Jquery将src从一个img添加到另一个img

Question

尝试让 jquery 替换随机放置的图像源 <img>标签。

发生的事情是我有一些 jquery UI slider ，当你滑动它们时，会出现 <img>随机标记到 div 表格。

这部分工作正常。

现在我还想要发生的是新放置的 <img>在那里src更改为匹配 src里面图像的 .color-img img .

这部分似乎根本不起作用。

我正在使用下面的方法来尝试实现它。

var imager = function(){$('.color-img img').attr('src');}
$('.place img').attr("src", imager);


但它只是没有做任何我所有的 <img>已经放置的就坐没有src像这样<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">

图像src未放置。

我没有出现任何错误，调试也没有显示任何我能看到的内容。

<小时/>

沃金

为了使其按预期工作，我必须添加

    var imager = function() {
   return $('.color-img img').attr('src');
 }

    $('.place img').attr("src", imager());

进入其 on 函数，然后在我的更改事件之后直接调用该函数。

      })
    }spinit()

}); 

这是我的代码

function blendit() {

  var range = $(".percent-mix").slider({
      min: 0,
      max: 100,
      step: 1
    }),
    slideme = $(".percent-mix"),
    places = $(".place");
  slideme.slider('option', 'change', function(e) {

    var imager = function() {
      $('.color-img img').attr('src');
    }
    $('.place img').attr("src", imager);

    // set `.place` `div` `html` to empty string
    places.each(function() {
      this.innerHTML = ""
    });
    // `range` value cast to `Number` 100 , or decimal if less than 100
    var r = Number(range.slider("option", "value") === 100 ? range.slider("option", "value") : "0." + range.slider("option", "value"));
    // round `r`
    var p = Math.round(r === 100 ? r : places.length * r);
    if (p !== 100) {
      for (var i = 0; i < p; i++) {
        // `j` : "random" `.place`
        var j = Math.floor(Math.random() * places.length);
        // if `.place` at index `j` `.html().length ==== 0` ,
        // append to `.place` at index `j`
        if (places.eq(j).html().length === 0) {
          places.eq(j).html('<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">')
        }
        // else , filter `.place` , return `s` `.place` `div` elements
        // having `innerHTML.length === 0`,
        // select "random" index from `s` ,
        // append to `.place` at index `Math.random() * s.length`
        else {
          var s = places.filter(function() {
            return this.innerHTML.length === 0
          });
          s.eq(Math.floor(Math.random() * s.length)).html('<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">')
        }
      };
    } else {
      places.html(function() {
        return '<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">'
      })
    }

  });

  range.slider("value", 100).trigger("slide");
  slideme.trigger("change");
  var len = places.filter(function() {
    return this.innerHTML.length > 0
  });
  console.log(len.length); // `49`

}

$(function() {
  $(".blend-tile").click(function() {
    var li = $('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="percent-mix"></div><div class="mix-value"></div></div></div></li>');
    $("#mixers").append(li);
    slideumus();
    $('#mixers li:first .percent-mix').bind(blendit());
    $(".tpic", this).clone(true, true).contents().appendTo(li.find('.color-img'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<ul id="mixers">

  <li>
    <div class="align-table">
      <div class="color-img t-align">
        <img width="65" height="65" src="http://mosaicshack.com/wp-content/uploads/2015/04/Opulence_Teal_Gold.jpg" class="attachment-thumb-blend wp-post-image" alt="Opulence Teal Gold">
      </div>
      <div class="t-align">
        <div class="percent-mix ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
          <div class="ui-slider-range ui-widget-header ui-slider-range-max" style="width: 0%;"></div>
          <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
        </div>
        <div class="mix-value">0</div>
      </div>
    </div>
  </li>
</ul>

<ul>

  <li class="t-align-row">
    <ul class="align-table">
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
      <li class="t-align">
        <div class="place">
          <img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">
        </div>
      </li>
    </ul>
  </li>
</ul>

Answer 1

var imager = $('.color-img img').attr('src');
$('.place img').attr("src", imager);

试试这个......