If Else 语句、Javascript 切换、Liquid / Ruby 语言答案

【问题标题】：If Else Statements, Javascript Toggle, Liquid / Ruby LanguageIf Else 语句、Javascript 切换、Liquid / Ruby 语言
【发布时间】：2023-12-25 13:48:02
【问题描述】：

感谢您查看我的问题。

我遇到的问题是 Shopify、Liquid、JQuery 和 Javascript。

我有一个 JQuery / Liquid 滑块，它有四个不同的类别。 NBA、NHL、MLB 和 MLS。页面加载时..

jQuery(document).ready(function ($) {

$(".ncaa-carousel-filter").addClass("active");
$("#ncaa-carousel").toggle();

这使得无论您在网站的哪个部分（NBA、NHL 等），在您点击相应的切换按钮之前，您仍然会看到 NCAA 轮播。

    var carousel = "-carousel";
var carouselFilter = "-carousel-filter";
$("#carousel-filters").on("click", ".ncaa-carousel-filter", function() {
    $("[class*="+carouselFilter+"]").removeClass("active");  
    $(this).addClass("active");
    $("[id*="+carousel+"]").hide();
    $("#ncaa-carousel").toggle();
});

我已经分解了滑块并尝试使用 Liquid 来显示它们。

{% if collection.current_type or collection.handle contains "mlb" %}
{% include 'mlb-slider' %}
{% elsif collection.current_type or collection.handle contains "nba" %}
{% include 'nba-slider' %}
{% elsif collection.current_type or collection.handle contains "mls" %}
{% include 'mls-slider' %}
{% elsif collection.current_type or collection.handle contains "nhl" %}
{% include 'nhl-slider' %}
{% else %}
{% include 'ncaa-slider' %}
{% endif %}

我认为问题在于滑块设置为 display: none 直到切换。所以当我去包含它们时，它们没有显示，因为它们设置为显示：无。

如果我删除该 CSS，我最终会在页面上显示 4 个滑块。

我认为这是我如何设置它的问题，我需要一些逻辑上的帮助。

这个小提琴显示了我正在使用的大部分代码。 http://jsfiddle.net/asx90842/

也许我可以删除 display: none CSS 并使用我开发的 Liquid if 语句来代替您在小提琴中看到的 HTML 代码？

任何帮助都会很棒！

非常感谢！

【问题讨论】：

标签： javascript jquery if-statement shopify liquid

【解决方案1】：

首先，不要在页面加载时切换 ncaa，为什么不在 html 模板中将其设置为活动状态？只需放置一个.active 类，然后在您的样式表中执行.active{display:block} 或任何您喜欢的。如果您可以在按钮中使用data-* 属性，那就更好了，因为您不必使用正则表达式来获取相应的 id。

所以你的html会是这样的

<button class="ncaa-carousel-filter active" data-target="ncaa-carousel">College</button>
<div style="margin-bottom:10px;" class="teams-carousel clearfix active" id="ncaa-carousel">

其次，所有五个轮播按钮/div 都共享相同的逻辑，因此您只需为所有这些按钮编写一个侦听器：

 $("#carousel-filters").on("click", "button", function() {
   $("#carousel-filters button").removeClass("active");
   $(this).addClass("active");
   $(".teams-carousel").hide();
   // Use data attributes to get corresponding div id
   var id = $(this).data('target');
   $(id).toggle();
 });

最后，我对 ruby/liquid 不是很熟悉，但我敢打赌，有一个 for 循环结构，您可以使用它来编写一个块并使用不同的值对其进行迭代。

【讨论】：

【解决方案2】：

解决此问题的一种方法是分配一个可在 Javascript 类/id 选择器中重复使用的液体变量。我会在页面顶部附近添加以下液体。

{% if collection.current_type or collection.handle contains "mlb" %}
{% assign sport_league 'mlb' %}
{% elsif collection.current_type or collection.handle contains "nba" %}
{% assign sport_league 'nba' %}
{% elsif collection.current_type or collection.handle contains "mls" %}
{% assign sport_league 'mls' %}
{% elsif collection.current_type or collection.handle contains "nhl" %}
{% assign sport_league 'nhl' %}
{% else %}
{% assign sport_league 'ncaa' %}
{% endif %}

包括在内，您将拥有一个新变量sport_league，它表示用于表示任何特定运动/轮播的通用字符串。例如，您现在可以在 Javascript 的末尾编写以下代码来仅显示所需的轮播。

$('#{{ sport_league }}-carousel').show();

这只是执行一次的 JavaScript，使用变量 sport_league 否定 display: none CSS 并显示适当的轮播。

【讨论】：