CSS & Jquery - 切换选择子元素

Question

元素:

我有一个按钮可以将列长度从 3 切换到 4。

JQUERY

    <script language="javascript">
    $(document).ready(function(){ 

        $("p.changeCol_but").click(function(){

           $("p.changeCol_but span").toggle();

           $(".products ul li#prod").toggleClass("column_3","slow");

*--// fake code of what I want to do //--*

 $(".products ul li#prod:nth-child(4,8,12)").toggleClass(".products ul li#prod:nth-child(3,6,9)", "fast");

*--// fake code of what I want to do //--*

        });
    });

    </script>

CSS

<style>

.products ul { float:left; display:block;  }
        .products ul li#prod { float:left; display:block; margin-right:8px; width:225px; border:1px #209d00 solid; position:relative; margin-bottom:8px; }
        .products ul li#prod:nth-child(4) { margin-right:0; }

</style>

HTML

 <div class="products">

      <ul>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Power Bilt Tourbilt Golf Package</h1>


          <div class="popup">
            <ul class="data">
              <li>Deep face alloy driver and fairway metal with graphite shafts. (ladies driver, 3FW, 5FW with graphite shafts)</li>
              <li>Two Pro Trajectory Hybrid Clubs with steel shafts. (ladies set = 1 graphite shafted hybrid)</li>
              <li>5 alloy irons (#6-PW) with steel shafts. (ladies set = #7-SW with graphite shafts)</li>

            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Alien AG-5 Golf Package</h1>
          <div class="popup">
            <ul class="data">
              <li></li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Tour Craft Xtreme Golf Package</h1>
          <div class="popup" >
            <ul class="data">
              <li>18 piece golf package</li>
              <li>Package includes: driver, faiway metal, hybrids, irons, putter, standbag & head covers</li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Tour Craft SX4 Golf Package</h1>
          <div class="popup" >
            <ul class="data">
             <li>16 piece golf package</li>
              <li>Package includes: driver, faiway metal, hybrids, irons, putter, standbag & head covers</li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>


            <li id="prod">
          <div class="mainpic"></div>
          <h1>Orlimar H.E.2 Golf Package</h1>
          <div class="popup" >
            <ul class="data">
              <li>Woods, Hybrids, Irons, Putter, Standbag & Head Covers</li>
              <li>Driver, faiway metal and Hybrids feature graphite shafts</li>
              <li>Alloy irons feature lightweight steel shafts</li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Don't Know</h1>
          <div class="popup" >
            <ul class="data">
              <li></li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Don't Know</h1>
          <div class="popup" >
            <ul class="data">
              <li></li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Don't Know</h1>
          <div class="popup" >
            <ul class="data">
              <li></li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

      </ul>

    </div>
    <!--Products-->

问题:

默认情况下它们都有右边距。将 margin-right:0 从每第 4 个元素切换到每第 3 个元素。

提前致谢。

Answer 1

由于您已经依赖 css3 选择器，您可以简单地更改:

.products ul li#prod:nth-child(4)

到:

.products ul li#prod:last-child

但这当然只有在您将第 4 列设置为 display:none 时才有效，这样第 3 列实际上就是最后一列。目前我不知道这是否真的发生了，因为 .toggleClass(".products ul li#prod#:nth-child(3)", "fast") 不会对我来说很有意义。

请注意，toggleClass 的第一个参数必须是类名(或更多...)或函数，在您的示例中两者都不是。另请注意，第二个参数不是速度，请参阅 .toggleClass()