jQuery從一個img向另一個添加src

Question

試圖讓jquery替換隨機放置的<img>標簽上的圖像源。

發生的事情是我有幾個jquery UI滑塊，當您滑動它們時，將<img>標記隨機放置到div的表中。

這部分工作正常。

現在，我還想發生的是，新放置的<img>的src更改，以匹配.color-img img圖像的src 。

這部分能源部似乎根本沒有用。

我正在使用風箱來嘗試實現它。

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函數，然后在我的change事件之后直接調用該函數。

      })
    }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);

嘗試這個....

Answer 2

您的imager不是功能的變量，這意味着它必須被調用

改變這條線

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

至

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

同時添加返回到您的函數

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

Answer 3

您可能只需要這樣做...

我把它擺在小提琴中，看看我能弄清楚什么。

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

也許這可能會有所幫助...

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

要么

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

要么

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

要么

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

Answer 4

您可以將當前時間添加到src，因此緩存的圖片將被替換

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