Question

首先，要温柔！我是一个javascript noob！

我创建了一个Codepen来替换类，并通过javascript对元素点击进行转换。在Codepen环境中，它完美运行。当我尝试将相同类型的功能转移到WordPress时，问题出现了。

这是原始的javascript：

$(document).ready(function(){
  $("#panel-1 a.get-big").click(function(){
    $("#panel-1").addClass("huge-panel");
    $("div:not(#panel-1)").removeClass("huge-panel");
    $("#panel-1 #the-top").addClass("move-in-top");
    $("#panel-1 #the-bottom").addClass("move-in-bottom");
    $("div:not(#panel-1 #the-top)").removeClass("move-in-top");
    $("div:not(#panel-1 #the-bottom)").removeClass("move-in-bottom");
  });
  $("#panel-2 a.get-big").click(function(){
    $("#panel-2").addClass("huge-panel");
    $("div:not(#panel-2)").removeClass("huge-panel");
    $("#panel-2 #the-top").addClass("move-in-top");
    $("#panel-2 #the-bottom").addClass("move-in-bottom");
    $("div:not(#panel-2 #the-top)").removeClass("move-in-top");
    $("div:not(#panel-2 #the-bottom)").removeClass("move-in-bottom");
  });
  $("#panel-3 a.get-big").click(function(){
    $("#panel-3").addClass("huge-panel");
    $("div:not(#panel-3)").removeClass("huge-panel");
    $("#panel-3 #the-top").addClass("move-in-top");
    $("#panel-3 #the-bottom").addClass("move-in-bottom");
    $("div:not(#panel-3 #the-top)").removeClass("move-in-top");
    $("div:not(#panel-3 #the-bottom)").removeClass("move-in-bottom");
  });
  $("#panel-4 a.get-big").click(function(){
    $("#panel-4").addClass("huge-panel");
    $("div:not(#panel-4)").removeClass("huge-panel");
    $("#panel-4 #the-top").addClass("move-in-top");
    $("#panel-4 #the-bottom").addClass("move-in-bottom");
    $("div:not(#panel-4 #the-top)").removeClass("move-in-top");
    $("div:not(#panel-4 #the-bottom)").removeClass("move-in-bottom");
  });
  $("#panel-5 a.get-big").click(function(){
    $("#panel-5").addClass("huge-panel");
    $("div:not(#panel-5)").removeClass("huge-panel");
    $("#panel-5 #the-top").addClass("move-in-top");
    $("#panel-5 #the-bottom").addClass("move-in-bottom");
    $("div:not(#panel-5 #the-top)").removeClass("move-in-top");
    $("div:not(#panel-5 #the-bottom)").removeClass("move-in-bottom");
  });
});

它不优雅，但它很有效。 Here it is on Codepen

现在问题和我迷路的地方。我想将它应用于WordPress自定义循环。 javascript的唯一部分是必要的（我相信）是第一个引用＃panel-1的.click（函数）例程。在循环中，我使用php将post_ID作为div的id拉入。我需要想办法通过get_the_ID（）调用动态替换javascript中所有panel-1实例。从我能够在这里以及网络上的其他地方收集的所有内容中，我认为这将以某种方式使用wp_localize_script，但看着这只会让我感到困惑。

任何帮助将不胜感激！

在Javascript函数中回应WordPress帖子

0 个答案: