Question

我正在尝试使用jquery效果将图像传输到div

这是我正在使用的jquery代码。

$('#btn-1').click(function() {
    $('#transferEffect').remove(); // Remove any existing one
    $('<style id="transferEffect" type="text/css">' + // Add new one
        '.ui-effects-transfer { background-image: url(' + $(this).attr('src') + '); }' +
        '</style>').appendTo('head');
    $(this).effect('transfer', {to: $('.target')}, 1000);
});

效果很好，但现在我正在尝试将它与我的代码集成，我似乎无法弄清楚如何在div中获取主图像的id / name / class。

<div class="listing-result-row-holder" >
    <div class="listing-image">
        <a href="google.com"><img src="https://m1-s.licdn.com/mpr/mpr/shrink_60_60/p/3/000/02e/02d/35f521f.png" title="lego" id="img-1" class="img-polaroid" /></a>
        <div class="listing-total-image">1</div>
        <div class="clearfix"></div>
    </div>
    <div class="listing-detail">
        <div class="listing-result-title">
            <span class="listing-badge">bla bla</span>
            <span class="title_browse_ad"><a href="google.com">TITLE</a></span>
        </div>
        <span class="listing-detail-left">
            <div class="listing-more-info">
                <div class="row">RANDOM TEXT</div>
            </div>
        </span>
        <span class="listing-detail-right"></span>
    </div>
    <div class="clearfix"></div>
    <div class="pull-right" style="margin: 0 5px 5px 0;">
        <a href="javascript:void(0);" id="btn-1" name="saveLinkId-1" class="btn btn-link"><span> save</span></a>
    </div>
</div>
<div class="target"></div>

基本上我想在用户点击“保存”按钮时启动图像效果。这是一个动态生成的页面，因此ID会发生变化（例如ID＃btn-1可能是btn-2）

here is my code

Answer 1

我对你的例子做了一些修改，但不太确定你期望什么样的效果。希望这对你有所帮助。点击here

$('#btn-1').click(function() {
    $('#transferEffect').remove(); // Remove any existing one
    $('<style id="transferEffect" type="text/css">' + // Add new one
        '.ui-effects-transfer { background-image: url(' + $(".listing-image img").attr('src') + '); }' +
        '</style>').appendTo('head');
    $(".listing-image img").effect('transfer', {to: $('.listing-image')}, 1000);
});

已编辑：

我做了一些更改。这是更新的link。

Answer 2

你可以尝试遍历div标签（类拉右）。像这样

var desId = $('div.pull-right > a ') .attr('id');

如果我没错，我想你可以使用这个设备调用点击事件。

jquery图像效果

2 个答案: