尝试让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());
这是我的代码
})
}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;
答案 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())