如何使用 .parent() 方法创建一个仅特定于一个的按钮<div>？

Question

我正在使用jQuery插件FullCalendar，我想制作一个"周末"按钮，在日历中切换周末。我制作了这个按钮，但我在同一页面上有多个日历视图，并且按钮显示在所有视图上，我只希望它显示在主日历上。所以，我想我可以使用parent（）方法，这样只有类为"calendar"的日历头才会有按钮。如果你认为你有更好的解决方案，请随意分享，这是我的代码：

var $('.fc-header').parent() = parent
if parent == ".calendar"
  $('.fc-header-left').append('<span class="weekends fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-active"><span class="fc-button-inner"><span id="weekends" class="fc-button-content">weekends</span><span class="fc-button-effect"><span></span></span></span></span>');
  $("#weekends").click(function () {
});

我相信这个代码有很多问题，如果你能描述所有的问题，那就太好了，谢谢！

Answer 1

好的，首先，你的var声明是无效的，你把它倒过来了。不能这样分配变量名。第二，你的if陈述是错误的。第三，您的$("#weekends").click()事件将不适用于动态创建的元素。为了附加到动态创建的元素，您需要将.on()与所有3个参数一起使用。第四，只要用正确的类抓住你想要的元素，然后跳过所有其他元素，因为你正在向你想要的元件添加class="calendar"，对吗？没有必要检查所有这些无稽之谈并抓取父对象。

更好的解决方案：只需选择实际元素，而不是像这样选择$('.fc-header')的所有元素（2行代码，没有if语句，混乱更少）：

$(".calendar").children(".fc-header-left").append('<span class="weekends fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-active"><span class="fc-button-inner"><span id="weekends" class="fc-button-content">weekends</span><span class="fc-button-effect"><span></span></span></span></span>');
$(".calendar").on("click", ".fc-button-content", function() {
        // Perform click code here...
});

此代码假设有一个具有fc-header-left类的元素子级，该类是具有calendar类的元素的直接子级。当然，我不知道你是如何设置DOM的，因为你没有发布任何HTML，只有jQuery，所以我对此进行了有根据的猜测。

Answer 2

您可以检查父级是否具有类"calendar"

var $parent = $('.fc-header').parent();
if($parent.hasClass('calendar')){
   $('.fc-header-left').append('...Your Button');
   //By the way I thing this event should be in the "weekends" class, not the id
   $(".weekends").click(function () {
      //your event code here
   });
}