Question

感谢您查看我的问题。

我遇到的问题是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 %}

我认为问题是滑块设置为显示：无切换。因此，当我去包含它们时，它们没有显示，因为它们被设置为显示：无。

如果我删除了CSS，我最终会在我的页面上显示4个滑块，因为它们都在显示。

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

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

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

任何帮助都会很棒!!

非常感谢！

Answer 1

首先，不是在页面加载时切换ncaa，为什么不在html模板中将其设置为活动状态？只需将.active课程放在您的样式表中.active{display:block}或您喜欢的任何内容。如果您可以在按钮中使用data-*属性，那么您将不必使用正则表达式来获取相应的ID。

所以你的HTML会是这样的

＆＃13;

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

＆＃13;

其次，所有五个轮播按钮/ div都共享相同的逻辑，所以你可以为所有这些编写一个监听器：

＆＃13;

 $("#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();
 });

＆＃13;

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

Answer 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并显示相应的轮播。

如果Else语句，Javascript切换，液体/ Ruby语言

2 个答案: