jQuery 切換循環的所有元素 [錯誤]

Question

我在這個產品循環中，每個都有一個詳細信息框，當您單擊“更多+”時會出現，但在循環內部，當我單擊任何一個時，它會顯示所有產品的框，就像我可以讓這個獨一無二每個產品？

更新！

我想出現的框：

        <div class="keyFeaturesBox">
            <div class="keyFeaturesBox-header">
                <i id="keyFeaturesClose" class="far fa-times-circle"></i>
            </div>
            <div class="keyFeaturesBox-container">
                <div class="features">
                    <i class="fas fa-car"></i>
                    <span>Front Wheel Drive</span>  
                </div>       
                <div class="features">
                    <i class="fas fa-car"></i>
                    <span>Front Wheel Drive</span>  
                </div>   
                <div class="features">
                    <i class="fas fa-car"></i>
                    <span>Front Wheel Drive</span>  
                </div>           
            </div>                
        </div>

CSS：

div.keyFeaturesBox, div.viewSavingsBox {
    display: none;
    position: absolute;
    left: 0;
    bottom: 50px;
    width: 100%;
    height: 180px; max-height: 180px;  
    background-color: #f1f1f1;
    box-sizing: border-box;
    border: 2px solid rgba(112, 112, 112, .34);
}

環形：

for ($i = 0; $i < count($vehicles); $i++) { 
           echo '<div class="keyFeaturesBox">
                <div class="keyFeaturesBox-header">
                    <i id="keyFeaturesClose" class="far fa-times-circle"></i>
                </div>
                <div class="keyFeaturesBox-container">
                    <div class="features">
                        <i class="fas fa-car"></i>
                        <span>Front Wheel Drive</span>  
                    </div>       
                    <div class="features">
                        <i class="fas fa-car"></i>
                        <span>Front Wheel Drive</span>  
                    </div>   
                    <div class="features">
                        <i class="fas fa-car"></i>
                        <span>Front Wheel Drive</span>  
                    </div>           
                </div>                
            </div>';
}

HTML 代碼：

<div class="vehicleDetails"><!-- Details start -->                
  <div class="keyFeatures">
    <span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
  </div>
  <div class="viewSavings">
    <span id="viewSavings" class="viewSavings">View Savings +</span>
  </div>                
</div><!-- Details end -->

jQuery 代碼：

// Features Box Toggle
$(".keyFeatures-span").click(function() { 
    $(".keyFeatures").toggleClass("selectedFeatures");
    $(".keyFeaturesBox").slideToggle("fast");;
});

Answer 1

您可以使用.closest()向上移動 DOM 樹並匹配任何選擇器。

下面的例子有完整的注釋。

您沒有為.keyFeaturesBox提供任何 HTML ，因此該行可能需要調整，作為猜測您可能需要使用.closest(".keyFeatures").find(".keyFeaturesBox")將DOM樹向上移動到包裝器class 然后搜索孩子的特征框。 如果沒有所有 HTML，這很難解決。

---

演示

 // Event trigger for click of.keyFeatures-span $(".keyFeatures-span").click(function() { // Move up DOM tree and apply class selectedFeatures to first match $(this).closest(".keyFeatures").toggleClass("selectedFeatures"); // You didn't include.keyFeaturesBox in your example HTML so you might need to adapt this $(this).closest(".keyFeaturesBox").slideToggle("fast"); });

 .selectedFeatures { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="vehicleDetails"> <div class="keyFeatures"> <span id="keyFeatures" class="keyFeatures-span">Key Features +</span> </div> <div class="viewSavings"> <span id="viewSavings" class="viewSavings">View Savings +</span> </div> </div> <div class="vehicleDetails"> <div class="keyFeatures"> <span id="keyFeatures" class="keyFeatures-span">Key Features +</span> </div> <div class="viewSavings"> <span id="viewSavings" class="viewSavings">View Savings +</span> </div> </div>

Answer 2

我讓你的代碼像這樣運行：

<!-- Details start -->                
<div class="vehicleDetails">
    <div class="keyFeatures">
        <span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
        <div class="keyFeaturesBox">
            <p>a feature</p>
            <p>a feature</p>
            <p>a feature</p>
            <p>a feature</p>
            <p>a feature</p>
            <p>a feature</p>
            <p>a feature</p>
        </div>
    </div>
    <div class="viewSavings">
        <span id="viewSavings" class="viewSavings">View Savings +</span>
    </div>                
</div>
<!-- Details end -->

<script>
    // Features Box Toggle
    $(".keyFeatures-span").click(function() { 
        let $parentNode = $(this).parent('.keyFeatures');
        $parentNode.toggleClass("selectedFeatures");
        $parentNode.find(">.keyFeaturesBox").slideToggle("fast");
    });
</script>

Answer 3

因為position: absolute; 並且所有 div 顯示為重疊的bottom值相同，您會看到唯一的最后一個 div。

如果您刪除position: absolute; 根據您的風格，它會切換所有 div，但它會從上到下切換，與您的不同。

或切換后，增加底部

 $(".keyFeatures-span").click(function() { $(".keyFeatures").toggleClass("selectedFeatures"); $(".keyFeaturesBox").slideToggle("fast"); $(".keyFeaturesBox").each(function(i,e){ $(this).css("bottom", i * 180); //180 is your box height in css }); });

 div.keyFeaturesBox, div.viewSavingsBox { display: none; position: absolute; left: 0; bottom: 50px; width: 100%; height: 180px; max-height: 180px; background-color: #f1f1f1; box-sizing: border-box; border: 2px solid rgba(112, 112, 112, .34); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="vehicleDetails"><!-- Details start --> <div class="keyFeatures"> <span id="keyFeatures" class="keyFeatures-span">Key Features +</span> </div> <div class="viewSavings"> <span id="viewSavings" class="viewSavings">View Savings +</span> </div> </div> <div class="keyFeaturesBox"> <div class="keyFeaturesBox-header"> <i id="keyFeaturesClose" class="far fa-times-circle"></i> </div> <div class="keyFeaturesBox-container"> <div class="features"> <i class="fas fa-car"></i> <span>Front Wheel Drive1</span> </div> <div class="features"> <i class="fas fa-car"></i> <span>Front Wheel Drive</span> </div> <div class="features"> <i class="fas fa-car"></i> <span>Front Wheel Drive</span> </div> </div> </div> <div class="keyFeaturesBox"> <div class="keyFeaturesBox-header"> <i id="keyFeaturesClose" class="far fa-times-circle"></i> </div> <div class="keyFeaturesBox-container"> <div class="features"> <i class="fas fa-car"></i> <span>Front Wheel Drive2</span> </div> <div class="features"> <i class="fas fa-car"></i> <span>Front Wheel Drive</span> </div> <div class="features"> <i class="fas fa-car"></i> <span>Front Wheel Drive</span> </div> </div> </div> <div class="keyFeaturesBox"> <div class="keyFeaturesBox-header"> <i id="keyFeaturesClose" class="far fa-times-circle"></i> </div> <div class="keyFeaturesBox-container"> <div class="features"> <i class="fas fa-car"></i> <span>Front Wheel Drive3</span> </div> <div class="features"> <i class="fas fa-car"></i> <span>Front Wheel Drive</span> </div> <div class="features"> <i class="fas fa-car"></i> <span>Front Wheel Drive</span> </div> </div> </div>