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

时间:2015-06-17 12:08:23

标签: javascript jquery html

尝试让jquery替换随机放置的<img>代码中的图像源。

发生的事情是我有一些jquery UI滑块,当你滑动它时,<img>标签会随机放置到div表中。

这部分工作没问题。

现在我想要发生的事情是,新放置的<img>可以更改src以匹配{{1}内图片的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">

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

WOKING

为了让这个工作符合要求我必须添加

src

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

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

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

这是我的代码

&#13;
&#13;
      })
    }spinit()

}); 
&#13;
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'));
  });
});
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:1)

chart

试试这个......

答案 1 :(得分:1)

你的imager不是变量的函数,这意味着它必须被调用

更改此行

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

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

同时添加返回功能

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

答案 2 :(得分:0)

你可能只需要这样做......

我会把它放在小提琴里,看看我能算出什么。

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

或者这可能会有所帮助......

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

OR

var imager = $('.color-img img', this).prop('src');

OR

var imager = $(this).find('.color-img img').prop('src');

OR

var imager = $(this).find('.color-img img').attr('src')

答案 3 :(得分:0)

您可以将当前时间添加到src,因此将替换缓存的图像

var d = new Date();
var imager = $('.color-img img').attr('src');
$('.place img').attr("src", imager+ "?"+d.getTime())