1

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/名前/クラスを取得する方法がわかりません。

<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 の可能性があります)。

ここに私のコードがあります

4

2 に答える 2

0

私はあなたの例にいくつかの変更を加えましたが、どのような効果が期待されているのかよくわかりません. これがお役に立てば幸いです。ここをクリック_

$('#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);
});

編集：

さらにいくつかの変更を加えました。ここに更新されたリンクがあります。

于 2013-04-03T11:23:35.127 に答える
0

このように、divタグ（class pull-right）からトラバースしてみることができます

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

私が間違っていなければ、この desId を使用してクリック イベントを呼び出すことができると思います。

于 2013-04-03T11:45:43.567 に答える