Question

请问有人可以建议我如何修改此JavaScript吗？我承认我没有太多使用JavaScript的经验，我已经尝试过自己，但最终却迷失了方向。

为说明起见，WooCommerce在我的网站上以.columns-3和.columns-4输出产品，并分别分配.first和.last类。

如果该网站加载在移动设备上，则下面的脚本将删除.first和.last标记，然后重新分配它们以在两列中显示产品。

该脚本当前仅针对function defaultProductRows和function adjustProductRows中的.columns-3。我还需要在同一脚本中定位.columns 4，但是我不确定如何添加它。

<script>        
$(window).on('load resize', function (){
  var windowWidth = $(window).width();
  if(windowWidth < 753){ // this is my screen size break point for the rows
    adjustProductRows(); // call the function to adjust add last and first classes
  } else {
    defaultProductRows(); // else if large screen size then get everything back to defalut
  }
});

function defaultProductRows(){
var products = $('ul.products.columns-3 li.type-product');
  products.each(function(idx, li) {
     var product = $(li);
     // remove all classes we added
 $('ul.products li.adjusted-row.first').removeClass('adjusted-row first');
     $('ul.products li.adjusted-row.last').removeClass('adjusted-row last');
  if(idx == 0) { // make sure first li tag gets first class
        product.addClass('first');
  }
  else if((idx+1) % 3 == 0) //this will make sure we have 3 rows by adding last classes after each 3 products
  {
    product.addClass('last');
  }
  else if(idx % 3 == 0)
  {
    product.addClass('first'); // make sure all products divided by 3 will have first       class
  }
  else
  {
    console.log(idx); // just checking for the index
  }


    });
}


function adjustProductRows() {

   var products = $('ul.products.columns-3 li.type-product');
products.each(function(idx, li) {
    var product = $(li);

  if(idx % 2 == 0) // we are even
  {
    product.addClass('adjusted-row first');
    product.removeClass('last');
  }
  else // we are odd
  {
    product.addClass('adjusted-row last');
    product.removeClass('first');
  }


    });

}</script>

Answer 1

更改选择器以包括第4列

发件人：

var products = $('ul.products.columns-3 li.type-product');

收件人：

var products = $('ul.products.columns-3 li.type-product, ul.products.columns-4 li.type-product');

这告诉jQuery选择列3或列4的li.type-products

如何结合两个JavaScript？

1 个答案: