jQuery 在 ajax 调用完成之前将 CSS 添加到元素？

Question

我正在使用 jquery 将由 javascript 打印的购物车发送到将创建 PDF 的 PHP 脚本。

我的问题是购物车在发送时没有附加任何样式，所以它看起来像这样:http://u31830.shellit.eu/kauppa/kuitit/kuitti63.pdf

我想简单地在一些元素上做一个 display:none 并在左边 float 一些元素，这样它看起来会很好。我知道这可以用 Attr() 来完成，但我不知道如何使用它。

这是我的 ajax 调用:

$(document).ready(function() {
$(function() {
    $(".submit").click(function() {
      var data = $('#yhteystiedot').serializeArray();
      //styling here?
      data.push( { name: 'cartContent', value: $('#emailedcart').html()}); // Read the cart, and send it to script
      //alert (data);return false;
     $.ajax({
    type: "POST",
    data: data,
    url: "order.php",
    dataType: "html",
    error: function(){ alert("Jotakin meni pahasti pieleen! Yritä uudelleen?");
 },
    success: function() {
 alert("Onnistui");
        }


  });
  return false;

    });
  });        
});

购物车在浏览器控制台上看起来像这样:

<div class="simpleCart_items" id="emailedcart">
    <div>
        <div class="headerRow">
            <div class="item-name">Tuote</div>
            <div class="item-quantity">Määrä</div>
            <div class="item-price">Hinta</div>
            <div class="item-total">Yhteensä</div>
            <div class="item-remove"></div>
        </div>
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-name">Teipit (Valkoinen hiilikuitu)</div>
            <div class="item-quantity">
                <input type="text" value="1" class="simpleCart_input">
            </div>
            <div class="item-price">48.00€</div>
            <div class="item-total">48.00€</div>
            <div class="item-remove"><a href="javascript:;" class="simpleCart_remove">Remove</a>
            </div>
        </div>
    </div>
</div>

我想在将以下 css 发送到 PHP 脚本之前将其添加到元素中

.item-remove{display:none;}
.headerRow div{float:left;}
.itemRow div{float:left;}

但是如何呢？

Answer 1

$(document).ready(function() {
  $(function() {
    $(".submit").click(function() {

      //do the CSS here.
      $('.item-remove').css({'display':'none'});
      $('.headerRow div').css({'float':'left'});
      $('.itemRow div').css({'float':'left'});

      var data = $('#yhteystiedot').serializeArray();
      //styling here?
      data.push( { name: 'cartContent', value: $('#emailedcart').html()}); // Read the cart, and send it to script
      //alert (data);return false;
     $.ajax({
    type: "POST",
    data: data,
    url: "order.php",
    dataType: "html",
    error: function(){ alert("Jotakin meni pahasti pieleen! Yritä uudelleen?");
 },
    success: function() {
 alert("Onnistui");
        }


  });
  return false;

    });
  });        
});

我假设您希望在单击之后但在 AJAX 之前更新这些 CSS 样式。正确的？否则，只需将那些 CSS jquery 行放在 $(".submit").click(function() {