Question

我有一些第三方代码（wordpress插件），它使用表格来显示购物车。标头将colspan属性设置为3，使事物保持一致。问题是这对于小屏幕看起来很可怕。

我的解决方案是显示：没有带有媒体查询的产品图片（因为在小屏幕上不需要它），但这会破坏标题的对齐，因为colspan现在需要为2.

我想要发生的是，如果屏幕尺寸小于560px宽，那么我们将colspan从3更改为2.

研究让我进入了jquery，但这是我第一次体验它。我已经从这项研究中编制了以下代码，但我缺乏使其工作的知识。

$(window).resize(function(){
    if ($(window).width() < 560){    
        $('.ec_cartitem_head_name').attr('colspan','2');
    }   
});

任何有助于使此代码正常工作的帮助将不胜感激！

谢谢！

Answer 1

我认为你走在正确的轨道上，但不是.attr，而是尝试使用.prop。无论如何，我试图将你的场景模拟为一个带有一些额外编码的演示来维护表格。

该表可调整大小（实际包装div），尝试减小宽度并查看colspan如何修改为1并增加宽度以查看colspan如何更改为1.

$(function() {
  $('#tableWrapper').resizable();

  $('#tableWrapper').resize(function() {
    if ($(this).width() < 200) {
      $(this).find('.adjSpan').filter(function() {
        return !$(this).hasClass('adjusted');
      }).prop('colspan', 1).addClass('adjusted').parent().append("<td></td>");
    } else {
      $(this).find('.adjSpan.adjusted').prop('colspan', 2).removeClass('adjusted').next().remove();
    }
  });
});

#tableWrapper {
  display: inline-block;
  width: 200px;
}
#tableWrapper table {
  width: 100%;
}
#tableWrapper table tr td {
  border: 1px solid #d2d2d2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/eggplant/jquery-ui.css" />
Reduce the width to set the colspan to 1, increase to set it to 2. <br/>
<div id="tableWrapper" class="ui-widget-content">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td class="adjSpan" colspan="2">2+</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</div>

Answer 2

一种方法，在兼容的浏览器中（并且鉴于您已经使用媒体查询，应该是安全的），是使用window.matchMedia()：

function toggleColspan () {
    $('.ec_cartitem_head_name').prop('colSpan', (window.matchMedia('(max-width: 560px)').matches ? 2 : 3));
}

$(window).on('resize', function () {
    toggleColspan();
});
$(document).ready(function () {
    toggleColspan();
    // whatever other code you might have
});

JS Fiddle demo

但是请注意，如果您根据屏幕大小显示/隐藏（或包含/删除）<img>元素，则不会（明确地）删除<td>否则将被“包含”在colspan内。

参考文献：

JavaScript的：
- Window.matchMedia()。
jQuery的：
- on()。
- prop()。

用jquery改变colspan

2 个答案: