通過單擊鏈接而不是被調整大小的項目來調整大小

Question

我剛開始學習JavaScript，因此如果有人能夠幫助我解決這個問題，我將不勝感激。

我目前有一個調整動畫，當iframe本身被點擊時發生。我想對其進行修改，以便在按下「調整大小」鏈接時調整大小，正如iframe本身所預計的那樣，但我無法使其工作。

在此先感謝

$("iframe").click(function() { 
 
    var p = $(this).parent(); 
 
    p.append('<iframe src="' + $(this).attr("src") + 
 
      '" alt="' + $(this).attr("alt") + '" class="preview" />'); 
 
    var i = $("iframe.preview", p); 
 
    var maxWidth = i.width(); 
 
    var maxHeight = i.height(); 
 
    i.css({ width: $(this).width(), height: $(this).height() }); 
 
    i.css({ top: $(this).position().top, left: $(this).position().left }); 
 
    i.show(); 
 
    i.animate({ marginTop: -((maxHeight/2) - (i.height()/2)), 
 
       marginLeft: -((maxWidth/2) - (i.width()/2)), 
 
       width: maxWidth, 
 
       height: maxHeight }, 800); 
 
    return false; 
 
});

html, body { 
 
height:100%; 
 
text-align:center; 
 
} 
 

 
iframe { 
 
    margin:0 auto; 
 
    border:#444 40px solid; 
 
    border-radius:30px; 
 
} 
 

 
#resize { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 

 
.preview { 
 
    width: 1024px; 
 
    height: 524px; 
 
    position: absolute; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="resize" href="#">resize</a> 
 

 
<iframe src="https://css-tricks.com" align="middle" frameborder="0" style="width: 768px; height: 524px;"></iframe> 
 
      </div>

Answer 1

變化$("iframe").click(...)到$("a").click(...)，或通過其ID：$("#resize").click(...)（這是更好，因爲前者會附加一個單擊事件處理程序ALL的<a>的（＃）