Question

好的我对jQuery来说是全新的，看起来我应该更快地进入这个领域，因为它肯定提供了一大堆真正令人敬畏的选项。现在......我想做以下事情：

当用户调整页面大小时，我希望能够同时为各种元素设置ClassName。因此，如果宽度在范围A和B之间，则设置类1，在B和C之间，设置类2，依此类推。到目前为止，我有这个：

<Script>
var sClass;
sClass = 'v11';
$(window).resize(function(){
CW = document.body.clientWidth;

if (CW >= 1 && CW <= 460) {sClass = 'v10';}
if (CW >= 461 && CW <= 770) {sClass = 'v11';}
if (CW >= 771 && CW <= 1100) {sClass = 'v12';}
document.getElementById('ZVal').value=CW;
document.getElementById('CVal').value=sClass;
    $(".zahbib").attr('class',sClass);
});
</script>

<Body LeftMargin='0' TopMargin='0' MarginHeight='0' MarginWidth='0'>

<InPut Type='Text' ID='ZVal'>
<InPut Type='Text' ID='CVal'>


<Table Width='100%' CellSpacing='0' CellPadding='0' Border='0'>
<Tr>
<Td class='zahbib' Width='40%'>Name:</Td>
<Td Width='60%'><InPut class='zahbib' Type='Text' Style='Width:100%'></Td>
</Tr>
<Tr>
<Td class='zahbib' Width='40%'>Email:</Td>
<Td Width='60%'><InPut class='zahbib' Type='Text' Style='Width:100%'></Td>
</Tr>
<Tr>
<Td class='zahbib' Width='40%'>Phone:</Td>
<Td Width='60%'><Select class='zahbib' Style='Width:100%'></Select></Td>
</Tr>
</Table>

</Body>

我从其他Stack Overflow帖子中获得了大部分内容（特别是jquery的东西），但更改类只发生在ONCE，然后根据宽度不再改变。它似乎完成了任务1次，而不是文本字段，我认为。

那么我做错了什么？ sClass值工作正常，更新调试文本字段，宽度读数也是如此。我知道它可以返回略有不同的值，具体取决于浏览器，但没关系，它不需要超精确。

非常感谢，我希望能够更彻底地开始讨论这个jQuery的事情:) w ^

我现在使用的CSS是：

@media screen and (min-width: 1px) and (max-width: 460px){
zeb{font-size:12px}
zah{font-size:12px}
input.text{font-size:12px}
}
@media screen and (min-width: 461px) and (max-width: 770px){
zeb{font-size:16px}
zah{font-size:16px}
input.text{font-size:12px}
}
@media screen and (min-width: 771px) and (max-width: 1920px){
zeb{font-size:22px}
zah{font-size:22px}
input{font-size:12px}
}

zeb和zah是你通常放置div的地方。我只是不想使用DIV，因为可能有一些我不想受影响的div。这样，我可以随意制作自己的标签，这样做非常好。（所以我不是<div></div>而是键入<zah>和</zah>）。这只是输入字段不会让步。谢谢：）

好的，这是表：

<Table Width='100%' CellSpacing='0' CellPadding='0' Border='0'>
<Tr>
<Td Class='v11' Width='40%'><zeb>Name:</zeb></Td>
<Td Width='60%'><input Type='Text' Style='Width:100%'></Td>
</Tr>
<Tr>
<Td Class='v11' Width='40%'><zah>Email:</zah></Td>
<Td Width='60%'><input Type='Text' Style='Width:100%'></Td>
</Tr>
<Tr>
<Td Class='v11' Width='40%'><zah>Phone:</zah></Td>
<Td Width='60%'><Select Style='Width:100%'></Select></Td>
</Tr>
</Table>

正如我所说，字体大小在zeb和zah上调整得很好:)只是输入字段不会随着我调整窗口大小而改变。 zeb和zah的确如此：）

Answer 1

我觉得使用媒体查询可以更轻松地完成您尝试做的事情。您可以在媒体查询中包含规则，以确保应用的样式规则取决于视口的宽度。

例如，要在屏幕宽度介于1到460像素之间时为所有div设置样式，可以使用：

@media screen and (min-width: 1px) and (max-width: 460px){
  div {
      color: red;
  }
}

此外，我们可以说当宽度介于461和770像素之间时，我们希望颜色为绿色：

@media screen and (min-width: 1px) and (max-width: 460px){
  div {
      color: red;
  }
}

@media screen and (min-width: 461px) and (max-width: 770px){
  div {
      color: green;
  }
}

您使用的是非标准HTML元素。尝试使用span元素并使用ID在CSS中隔离它们：

<Table Width="100%" CellSpacing="0" CellPadding="0" Border="0">
   <Tr>
      <Td Class="v11" Width="40%">
         <span class="zeb">Name:</span>
      </Td>
      <Td Width="60%"><input Type="Text" Style="Width:100%" /></Td>
   </Tr>
   <Tr>
      <Td Class="v11" Width="40%">
         <span class="zah">Email:</span>
      </Td>
      <Td Width="60%"><input Type="Text" Style="Width:100%" /></Td>
   </Tr>
   <Tr>
      <Td Class="v11" Width="40%">
         <span class="zah">Phone:</span>
      </Td>
      <Td Width="60%"><Select Style="Width:100%"></Select></Td>
   </Tr>
</Table>

现在，您可以将CSS应用于所有类 zeb和zah的元素：

@media screen and min-width 1px and max-width 460px {
    .zeb, .zah, input.text
    {
        font-size:12px;
    }
}

@media screen and min-width 461px and max-width 770px {
    input.text
    {
        font-size:12px;
    }

    .zeb, .zah
    {
        font-size:16px;
    }
}

@media screen and min-width 771px and max-width 1920px {
    input
    {
        font-size:12px;
    }

    .zeb, .zah
    {
        font-size:22px;
    }
}

请注意，我通过用逗号分隔选择器来浓缩相同的规则。

使用JQuery更改多个元素的类OnResize

1 个答案: