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-->

问题：

默认情况下，它们都有正确的边距。切换边距右：从每第4个项目到每第3个项目为0。

提前致谢。

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()

CSS＆amp; Jquery - 切换选择子元素

1 个答案: