通过单击链接而不是被调整大小的项目来调整大小

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>的（＃）