这是一个jsfiddle ，您可以在其中看到以下代码。
window resize触发事件时，我尝试使用 jquery 调整选定框的大小。
但只有第一个带有“选定”类的框受到影响。为什么是这样？
我怎样才能使具有相同班级的其他盒子工作？
html
<ul class="selection">
<li class="selected">selected 1</li>
<li>2</li>
<li class="selected">selected 3</li>
<li class="selected">selected 4</li>
<li>5</li>
<li class="selected">selected 6</li>
</ul>
jQuery
$(window).resize(function(){
$(".selected").each(function() {
//Define ratio & minimum dimensions
var minwidth = .5*(1024);
var minheight = .5*(600);
var ratio = 600/1024;
//Gather browser and current size
var imagewidth = $(this).width();
var imageheight = $(this).height();
var browserwidth = $(window).width();
var browserheight = $(window).height();
//Check for minimum dimensions
if ((browserheight < minheight) && (browserwidth < minwidth)){
$(this).height(minheight);
$(this).width(minwidth);
}
else
{
//When browser is taller
if (browserheight > browserwidth){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
if (browserwidth > imagewidth){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
}
}
//When browser is wider
if (browserwidth >= browserheight){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
if (browserheight > imageheight){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
}
}
}
return false;
});
});