0

上部にダウンロードボタンのあるメイン画像があるシンプルなhtmlサイトがあります。ダウンロードは、html5 ダウンロード属性で動作します。

これで、メイン画像の下にいくつかのサムネイルが表示されます。クリックすると、メイン画像がサムネイル画像に置き換えられます。

次の問題: 同じ JavaScript コードを使用して、ダウンロード ボタンの URL をサムネイルの URL に置き換えますが、ダウンロード ボタンをクリックすると、置き換えられた URL を使用する代わりに、HTML からハードコードされたダウンロード リンクが開きます。

HTML

<div class="dwnldcntnr">
 <img src="imgage1.jpg" alt="Image Title 1" />
  </div>

<div id="btncntnr">
 <a href="imgage/image1.jpg" download="image1.jpg">
 <button id="btn">Download</button></a>
  </div>

<div class="itemcntnr">
 <a href="image2.jpg" title="2.jpg">
 <img src="image2.jpg" />
  </a></div>

ダウンロード URL をサムネイル URL に置き換える JS コード

    <script type="text/javascript">
$(document).ready(function() {
    $('.itemcntnr a').click(function() {
        var path = $(this).attr('href');
        $('#btncntnr a').attr('href', path)
                             .attr('download', $('a', this).attr('title'));
        return false;
    });
});
</script>
4

2 に答える 2

0

DOM 要素全体を置き換えてみてください。

タグbutton内にa をネストする必要はないと思います。どちらもネイティブの対話性を持つ要素であるためです。a以前のバージョンの IE では、HTML 解析エラーが発生する可能性が高くなります。

$('.itemcntnr a').click(function() {
    var $this = $this.clone().empty().html('Download');
    $('#btncntnr a').replaceWith($this);
    return false;
});
于 2013-11-07T13:33:49.043 に答える
0

代わりに、HTML のリンクにハード コードされた href を配置しないでください。また、タグ内に$(document).ready
配置してはならないという ahren に同意します。代わりに、タグにスタイルを適用して、ボタンのように見えるようにしますbuttonaa

于 2013-11-07T13:54:34.980 に答える